Javascript 无法将属性从发送到父级到子级

单击项目时，无法将所需的属性从父项发送到子项。出于某种原因，它被打印在主页上，即啤酒厂；但是不在详细信息页面上。似乎DetailPage无法读取道具，因为我得到了一个“无法读取未定义的属性‘name’”

Brewery.js

  render() {
    const { breweries } = this.state;
    return(
      <div>
      <div className="main-container">
        <div className="banner">
          <div className="banner-content">
            <h1>Brewery</h1>
            <p>Find the best brewery in town</p>
          </div>
        </div>
        <div className="container">
          <div className="brewery-sort">
            <ButtonToolbar>
              <DropdownButton
              bsStyle="default"
              title="Sort"
              noCaret
              id="dropdown-no-caret"
              >
                <MenuItem onClick={() => this.sortAlpha()}>Alphabetically (A-Z)</MenuItem>
                <MenuItem onClick={() => this.sortRevAlpha()}>Alphabetically (Z-A)</MenuItem>
              </DropdownButton>
            </ButtonToolbar>
          </div>
          <div className="row">
            {breweries.slice(0, 10).map((brewery, i) =>
              <div className="col-xs-12 col-sm-4" key={i}>
                <Link to={`/brewery/${ brewery.id }`}>
                  <div className="card">
                    <div className="card-description">
                      <h2>{brewery.brewery_type}</h2>
                      <p>{brewery.city}, {brewery.state}</p>
                    </div>
                    <div className="card-name"><img src="https://img.icons8.com/color/20/000000/beer.png" alt="beer"/>  {brewery.name}</div>
                  </div>
                  <DetailPage brewery={brewery} />
                </Link>
              </div>
            )}
          </div>
        </div>
      </div>

      </div>
    )
  }

render（）{
const{breweries}=this.state；
返回(
酿酒厂
找到镇上最好的啤酒厂

this.sortAlpha（）}>按字母顺序（A-Z）
this.sortRevAlpha（）}>按字母顺序（Z-A）
{breweries.slice（0,10）.map（（brewery，i）=>
{啤酒厂。啤酒厂{u类型}
{brewery.city}，{brewery.state}

{brewery.name}
)}
)
}

DetailPage.js

  render() {
      const { id, state } = this.state.brewery;
      const breweries = this.state.breweries.filter(brewery => brewery.id !== id && brewery.state === state);
      return (
        <div className="background">
          <div className="details">
            <p>Name: {this.props.brewery.name}</p>
            <p className= "category">Category: {this.props.brewery.brewery_type}</p>
            <p>Address: {this.props.brewery.street}, {this.props.brewery.city}, {this.props.brewery.state}, {this.props.brewery.postal_code}, {this.props.brewery.country}</p>
            <p>Phone Number: {this.props.brewery.phone}</p>
            <p>Website: <a href={this.props.brewery.website_url} target="_blank" rel="noopener noreferrer">{this.props.brewery.website_url}</a></p>
          </div>
          <div className="recommendations">Recommendations</div>
          <div className="container">
            <div className="row">
              {breweries.slice(0,3).map(brewery => (
                <div className="col-xs-12 col-sm-4" key={brewery.id}>
                  <Link to={`/brewery/${ brewery.id }`} onClick={ this.reloadPage.bind(this)}>
                    <div className="card">
                      <div className="card-description">
                        <h2>{brewery.brewery_type}</h2>
                        <p>{brewery.city}, {brewery.state}</p>
                      </div>
                      <div className="card-name"><img src="https://img.icons8.com/color/20/000000/beer.png" alt="beer"/> {brewery.name}</div>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    }

render（）{
const{id，state}=this.state.brewery；
const breweries=this.state.breweries.filter（brewery=>brewery.id！==id&&brewery.state==state）；
返回(
名称：{this.props.brewery.Name}

类别：{this.props.brewery.brewery\u type}
地址：{this.props.brewery.street}，{this.props.brewery.city}，{this.props.brewery.state}，{this.props.brewery.postal_code}，{this.props.brewery.country}

电话号码：{this.props.brewery.Phone}

网站：

建议
{breweries.slice（0,3）.map（brewery=>(
{啤酒厂。啤酒厂{u类型}
{brewery.city}，{brewery.state}

{brewery.name}
))}
);
}

您需要在父级中将

brewery

设置为

状态

，然后通过 在父渲染中：

    <DetailPage brewery={this.state.brewery} />

---

“详细信息”页面中有一些错误，您正在将道具传递给子组件，但您在代码示例中引用的是内部状态。这是一个基本的例子，它基本上再现了您正在尝试做的事情

注意我们如何使用

this.props

而不是

this.state

。请记住，子组件依赖于传递到组件中的状态

class Brewery扩展了React.Component{
//…你所有的其他方法
render（）{
返回(
{this.props.data.name}
)
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
啤酒厂：[
{
id:1，
名称：'粘性'，
},
{
id:2，
名称：'Brewdog'，
}
]
};
}
render（）{
返回(
{this.state.breweries.map（（brewery）=>(
))}
)
}
}
ReactDOM.render（，document.getElementById（'root'））
请将您的示例作为工作示例发布，以便我们了解导致问题的其他原因
     this.props.brewery