Reactjs 将道具中的对象值传递给另一个组件

考虑下面的代码，我需要通过props将对象格式的id传递给另一个组件。但是我试了很多次，结果都不起作用。我想我可能弄错了什么，但我不确定它在哪里

主页更新：

render(props){
const data = this.state.data;
return (
    <div>
        <Header />
        <NavigationBar />
        <PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal}/>
          <div className="purchase-side">
            <div className="side-title">
              <h1>Purchase Order List</h1>
            </div>
            <hr class="solid" />
            {
              Object.keys(data).map((key) =>
                <div className="list-item">
                  <h2 onClick= {() => this.openModal(data[key].id)}> //get id
                    { data[key].item_name}
                  </h2>
                </div>
            )}
          </div>
          <div className="dads">        
        </div>
        </div>

    );
}

PurchaseInfoView以更新id

class PurchaseInfoView extends Component {
 render() {
        console.log(this.props.id) // get undefined
        return (
        <div className="Modal"
            style={{
                transform: this.props.show ,
                opacity: this.props.show ? "1" : "0"
              }}
            >

            <h3>Purchase Order detail</h3>
            <p>Id: {this.props.id}</p> //cannot get it
        </div>
        );
    }
}

export default PurchaseInfoView;

console.log结果：

---

我猜你叫错了。应该是{this.props.id}

render() {
        console.log(this.props.id);
        return (
        <div className="Modal">
            <h3>Purchase Order detail</h3>
                <p>Id: {this.props.id}</p>  //Changed line
        </div>
        );
    }

在主页内部，将id传递给PurchaseInfoView并作为道具访问它

   <PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal} id={this.state.id}/>

---

如果要将对象传递给道具，请执行以下步骤：

在父状态中定义对象。 调用组件时以道具形式传递对象 从child中的道具获取对象。 你错过了第二步

你应该试试这些：

主页

PurchaseInfoView

如果你有任何问题要评论，请告诉我

注意：如果你在模态中需要比id更多的东西，我就用一个对象aka{}来做这个。如果需要id，你只需要用你需要的id替换modalObject

干杯

编辑：要使此解决方案起作用，您必须：

至少将您的状态初始化为：

this.state={modalObject:{id:}

或者在显示元素之前，在子组件中进行NOTNULL测试，如下所示：

Id:{modalObject&&modalObject.Id？modalObject.Id:''}

这些是必需的，因为在第一次渲染时，您的状态将具有您设置的初始状态，因此如果您没有设置任何值或没有测试值。。。好它没有定义！：

---

注意：如果id为null而不是未定义的错误，您将在模式中显示一个空格

PurchaseInfoView中不应该是this.props.id而不是this.props.value.id吗？您传递的id与prop不同。Ofc将未定义。您好，感谢您的指导。但是我在控制台中仍然没有定义。logHi@sv12，当然。我已经更新了代码。看一看please@kokoka它没有被发送到PurchaseInfoView组件哦，我知道了。应该是Hi@Palencar。谢谢你清楚的解释。但是当我尝试用您的更正更新我的代码时，我得到了TypeError错误：无法读取未定义的属性'id'。可能它与objectModal={modalObject}有关吗？是的，很抱歉我在这里键入错误，我用modalObject everywhere编辑了代码，我还为你得到的错误添加了一个编辑，别忘了初始化你的状态，这样你就不会有未定义的错误。另一种解决方案是在子组件中进行NOTNULL测试，以查看在RenderCreat中添加需要模态对象的元素之前是否定义了模态对象，感谢您的指导。

   <PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal} id={this.state.id}/>

render(props){
const { data, modalObject, displayModal } = this.state; //use destructuring is more readable
return (
    <div>
        <Header />
        <NavigationBar />
        <PurchaseInfoView show={displayModal} closeModal={this.closeModal} modalObject={modalObject}/> //pass the object from destructuring state as props
        <div className="purchase-side">
          <div className="side-title">
            <h1>Purchase Order List</h1>
          </div>
          <hr class="solid" />
          {
            Object.keys(data).map((key) =>
              <div className="list-item">
                <h2 onClick= {() => this.openModal(data[key].id)}> //get id
                  { data[key].item_name}
                </h2>
              </div>
          )}
        </div>
        <div className="dads">        
      </div>
      </div>
    );
}

  openModal = (id) => {
    this.setState(
      {
        displayModal: true,
        modalObject: {id: id, ...any others key/val pair}
      });
  };

class PurchaseInfoView extends Component {
 render() {
        const { modalObject} = this.props; //here get your object from props
        console.log(modalObject.id);// here you have the object
        return (
        <div className="Modal"
            style={{
                transform: this.props.show ,
                opacity: this.props.show ? "1" : "0"
              }}
            >

            <h3>Purchase Order detail</h3>
            <p>Id: {modalObject.id}</p>
        </div>
        );
    }
}