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

为了使事情更加复杂，即使我返回了一个硬编码的元素，它也使我失望了：

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

尽管当我删除if (data)

时可以使用

我对这里发生的一切完全迷失了，不胜感激！

Answer 1

您不能使用

{this.getData()}

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

代替返回数据，您需要使用状态方法，该方法将再次渲染组件，以便您的数据将显示在render内部看到这个发布enter link description here

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

1 个答案: