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

Posted 2023-02-22

【中文标题】无法将数据从子功能组件传递到反应父组件（React.js）[重复]

【英文标题】：Unable to pass data from Child Functional Component to React Parent Component (React.js) [duplicate]

【发布时间】：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

【参考方案1】：

你不能用

this.getData()

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

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