Question

这是我的父组件

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的Component获取数据作为道具。那是名为dataOne的数据，我将其传递给ChildComponentTwo。
然后，我现在尝试将另一个名称为dataOne的，从ChildComponentOne获得的数据传递给ChildComponentTwo，但是当尝试通过this.props从ChildComponentTwo访问它时，它返回空字符串。

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

我在哪里弄错了？

Answer 1

尝试在沙盒中重现问题，看来发布ComponentOne中的数据时遇到问题。

似乎工作正常：https://codesandbox.io/s/muddy-bush-rbfct?file=/src/App.js

Answer 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;

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

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

2 个答案: