Reactjs 为什么我的道具没有传递给我的子组件？

我试图在React中创建一个模式，当点击App.js中的按钮时，该模式会显示一些信息

当我将模式代码放入App.js中时，它成功地填充了数据，尽管一次填充了每个li

我将模态移动到它自己的组件，但是我无法读取未定义的属性“name”

以下是我的App.js代码：

const APIURL = 'https://api.openbrewerydb.org/breweries?';
const citySearch = 'by_city=boston';

class App extends Component {
  constructor(props) {
    super(props)

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      error: null,
      isLoaded: false,
      breweries: [],
      show: false
    };
  }

  handleClose() {
    this.setState({ show: false });
  }

  handleShow() {
    this.setState({ show: true });
  }

  componentDidMount() {
    fetch(APIURL + citySearch)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            breweries: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, breweries } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
    return (
      <div>
        <ul>
        {breweries.map(brewery => (
          <div className="brewery-card">
          <li key={brewery.id}>
          <p id="brewery-name">{brewery.name}</p>
          <p id="brewery-type">{brewery.brewery_type}</p> 
          <p id="brewery-address">{brewery.street} {brewery.city}, {brewery.state} {breweries.postal_code} </p>
          <button onClick={this.handleShow}>Details</button>
          <a href={brewery.website_url} target="_blank" rel="noopener noreferrer">Visit Site</a>
          </li>
          </div>
        ))}
      </ul>
      <DetailsModal props={this.props.brewery} show={this.state.modalShow} />
      </div>
     );
    }
  }
}

export default App;

这是我的组件代码，它不接受道具：

import React, { Component } from 'react';
import { Modal, Button } from 'react-bootstrap'

class DetailsModal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            show: false
        };
    }
    render() {

        const brewery = this.props.brewery;

        return (
            <Modal {...this.props}>
            <Modal.Header closeButton>
              <Modal.Title>{brewery.name}</Modal.Title>
            </Modal.Header>
            <Modal.Body>{brewery.street} {brewery.city}, {brewery.state} {brewery.postal_code}</Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={this.handleClose}>
                Close
              </Button>
            </Modal.Footer>
          </Modal>
        )
    }
}

  export default DetailsModal;

---

我遗漏了什么，阻止App.js中的道具在DetailsModal.js中使用？

您传递的道具名称错误，或者访问的道具名称错误

这个

所以这个，props，someProp返回一些东西

如果尝试访问this.props.someOtherProp，它将返回undefined。 如果您尝试访问this.props.someOtherProp.X，您将得到一个错误，即无法读取未定义的属性“X”

如果您在理解道具的工作原理方面遇到问题，请查看文档中的

编辑： 出现错误的另一个原因是应用程序this.props.brewery中不存在

唯一和酿酒厂有关的就是你们所在的州

这是另一个错误。您需要在DetailsModel中指定要显示的内容

编辑2： 要在单击brewery时显示该brewery，需要将单击brewery的值保持在状态，并将其传递给modal

添加到应用程序状态currentBrewery

添加到onClick以将currentBrewery设置为来自breweries的brewery

请提供您所在州当前酿酒厂的详细信息

<DetailsModal brewery={this.state.currentBrewery} show={this.state.modalShow} />

---

这个.state.breweries是一个数组。您想只显示单击的酿酒厂吗？我知道如何解决这个问题，但不知道你想得到什么样的结果我认为对你有帮助你想只在你点击酿酒厂时显示模式吗？@James我想现在它对你有用了，只需编辑更改show={this.state.showmodel}to show={this.state.show}

//              \/ here
<DetailsModal brewery={this.props.brewery} show={this.state.modalShow} />

{
    someProp: "something"
}

this.state = {
    error: null,
    isLoaded: false,
    breweries: [],
    show: false,
    currentBrewery: {}
};

<button onClick={() => this.handleShow(brewery)}>Details</button>

handleShow(brewery) {
    this.setState({ show: true, currentBrewery: brewery });
}

<DetailsModal brewery={this.state.currentBrewery} show={this.state.modalShow} />