无法将数据从子功能组件传递到 React 父组件 (React.js)

Question

我正在 React 中构建一个自动完成组件，这样我就可以在单个页面中呈现单个自动完成；我想在单独的组件中呈现自动完成的建议。

我试过使用

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);
};

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

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

虽然当我删除 if (data)

时它有效

我完全不知道这里发生了什么，希望能得到一点帮助！

Answer 1

你不能使用

{this.getData()}

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

您需要使用状态方法而不是返回数据，该方法将再次渲染组件，以便您的数据显示在内部渲染中看到这个 Post

无法将数据从子功能组件传递到 React 父组件 (React.js)

Unable to pass data from Child Functional Component to React Parent Component (React.js)

javascript

dataflow

reactjs

react-props

react-state