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

Question

我正在尝试在 React 中创建一个模式，当单击 App.js 中的 button 时显示一些信息。

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

我将模态移动到它自己的组件中，但我得到了 Cannot read property 'name' of undefined。

这是我的 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 中使用？

Answer 1

您传递的道具名称错误（或访问错误）

这个

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

应该是

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

当您执行 const brewery = this.props.brewery; 时，您正在尝试从 props 访问 brewery 但您没有在 props 中提供 brewery，只有 props 和 show.

这里有一个例子来阐明正在发生的事情。

在这里你将 someProp 传递给 ComponentX

里面ComponentX this.props将是一个带有传递的道具的对象，在这种情况下，它将是

{
    someProp: "something"
}

所以this.props.somePropreturn"something"

如果您尝试访问 this.props.someOtherProp，它将 return undefined。如果您尝试访问 this.props.someOtherProp.X，您将收到 annot read property 'X' of undefined

的错误

如果您无法理解 props 的工作原理，请查看文档中的 examples。

编辑：

您收到错误的另一个原因是 App this.props.brewery 不存在。

只有与 brewery 或 breweries 相关的内容在您所在的州。

所以这是另一个错误。并且您需要在 DetailsModal

中指定要显示的内容

编辑 2：

要在单击啤酒厂时显示啤酒厂，您需要在状态中保留单击的啤酒厂的值并将其传递给模态

添加到App状态currentBrewery

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

添加到 onClick 以将 currentBrewery 设置为 breweries

中的 brewery

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

和

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

给DetailsModal你所在州的currentBrewery

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

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

Why are my props not being passed to my child component?

reactjs

react-props

编辑：

编辑 2：