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

Question

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

当我将模态代码放入时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？

标签： reactjsreact-props

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;你试图brewery从道具访问，但你没有brewery在道具中提供，只有props和show.

这是一个示例来阐明正在发生的事情。

在这里你传递someProp到ComponentX

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

{
    someProp: "something"
}

所以this.props.someProp返回"something"

如果您尝试访问this.props.someOtherProp它将返回undefined. 如果你尝试访问this.props.someOtherProp.X，你会得到一个错误annot read property 'X' of undefined

如果您在理解 props 的工作原理时遇到问题，请查看文档中的示例。

编辑：

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

只有与您的状态相关brewery或breweries处于您状态的事物。

所以这是另一个错误。您需要指定要显示的内容DetailsModal

编辑2：

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

1. 添加到App状态currentBrewery

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

2. 添加到onClick设置currentBrewery为brewery从breweries

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

   和

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

3. 给你所在州DetailsModal的那个currentBrewery

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