无法将数据从子功能组件传递到反应父组件（React.js）[重复]答案

【问题标题】：Unable to pass data from Child Functional Component to React Parent Component (React.js) [duplicate]无法将数据从子功能组件传递到反应父组件（React.js）[重复]
【发布时间】：2020-09-23 21:15:50
【问题描述】：

我正在 react 中构建一个自动完成组件，以便我可以在单个页面中呈现单个自动完成；我想在单独的组件中呈现来自 Autocomplete 的建议。

我尝试过使用

class Parent extends Component {

    getData = (data) => {
        if (data) return data;
    };

    render () {
        <AutoComplete passData={this.getData} />
        // after some other elements
        {this.getData()}
    }

}

和

export const Child = (props) => {
    ...
    const updateSuggestion = (suggestions) => {
        this.props.passData(suggestions);
    }
}

但不知何故，它让我失望了。更让我困惑的是，如果我只是使用下面的代码 console.log 检索到的数据，它就完美了！

getData = (data) => {
    if (data) console.log(data);
};

更复杂的是，即使我返回一个硬编码的元素，它也会让我失望：

getData = (data) => {
    if (data) return <p>Hello</p>;
};

虽然当我删除 if (data) 时它可以工作

我完全不知道这里发生了什么，希望能得到最轻微的帮助！

【问题讨论】：

P.S.通过“失败我”，我的意思是它根本不返回任何东西
您没有将数据存储在任何地方以供以后检索。
如何在父类中存储数据？
this.props.passData(suggestions); 不要在 Child 等功能组件中使用 this。它得到props 作为参数，所以它应该是props.passData(suggestions);。 :)
@Deykun 我刚刚更新了我的代码，似乎数据正在流向父类，但还有一个问题：它仅在我 console.log(suggestions) 时有效，但不适用于 return suggestions

标签： javascript reactjs react-props dataflow react-state

【解决方案1】：

你不能用

{this.getData()}

当组件第一次渲染时，这些{this.getData()} 将没有数据

您需要使用 state 方法而不是返回数据，该方法将再次渲染组件，以便您的数据将显示在内部渲染中看到这个发帖enter link description here

【讨论】：