如何将从子组件收到的道具传递给另一个反应答案

【问题标题】：How to pass a prop received from child component to another in react如何将从子组件收到的道具传递给另一个反应
【发布时间】：2021-02-06 19:26:57
【问题描述】：

这是我的父组件

import React, { Component } from 'react';

class Parent extends Component {
    state={
        myData: ""
    }

    getDataOne=(data)=>{
        console.log(data)
        this.setState({ myData: data });
    }

    render(){
        return (
            <div>
                <ChildComponentOne onGetSearch={this.getDataOne} />
                <ChildComponentTwo dataOne={this.props.location.state.searchData} dataTwo={this.state.myData}  />
            </div>
        );
    }
}
export default Parent;

事情就是这样。

我最初从重定向到 this 的组件中获取数据作为道具。那是叫dataOne的数据，我把它传给了ChildComponentTwo。
然后，我现在尝试将另一个从 ChildComponentOne 获得的数据传递给 ChildComponentTwo，其中另一个名为 dataOne 的道具名称，但是当尝试通过 this.props 从 ChildComponentTwo 访问它时它返回空字符串。

我可以访问的唯一数据是 dataOne。

我哪里弄错了？

【问题讨论】：

在将 state 变量发送到 prop 之前，您是否检查过控制台记录状态变量的值？是否在函数中设置
是的，我做到了，它显示在 Parent 组件中，但在 ChildComponentTwo 中返回空
可能是渲染时间的问题
我也是这么想的，你能帮忙用什么技巧让它工作吗？
当然，请检查答案，希望它会工作。我刚刚渲染了第一个孩子，所以它会在渲染第二个孩子之前腾出一些时间来更新状态

标签： reactjs react-props react-component

【解决方案1】：

尝试在沙盒中重现您的问题，但您似乎在从 ComponentOne 发布数据时遇到问题。

它似乎工作得很好：https://codesandbox.io/s/muddy-bush-rbfct?file=/src/App.js

【讨论】：

哦，我想那里的情况在某些方面与我有很大不同，我真的想不通......

【解决方案2】：

我认为问题在于渲染组件的时间。首先，React DOM 渲染父组件，然后它会同时渲染第一个和第二个子组件，因此第二个子组件不会看到更新的状态，因为它已经在 state 变量之前创建已设置。尝试在返回之前创建第一个子组件，如下所示。

import React, { Component } from 'react';

class Parent extends Component {
    state={
        myData: ""
    }

    getDataOne=(data)=>{
        console.log(data)
        this.setState({ myData: data });
    }

    render(){
        const firstComponent = <ChildComponentOne onGetSearch={this.getDataOne} />            
        const stateValue = this.state.myData
        return (
            <div>
                {firstComponent}
                <ChildComponentTwo dataOne={this.props.location.state.searchData} dataTwo={stateValue} />
            </div>
        );
    }
}
export default Parent;

在 return 之前渲染第一个孩子将给一些时间来更新状态。

【讨论】：

尝试在返回之前记录状态变量，看看状态是否在该点设置
那么我认为问题出在第二个组件上
如果我通过该 dataTwo 传递一个字符串（只是一个单词），它会显示在第二个组件中，但未显示状态数据。
哦，那就试着把状态值拿到一个常量，然后传给子组件。我更新了答案
还是一样。