如何从React中的另一个组件设置一个组件的状态

Question

假设我有以下名为Home的组件：

this.state = {
    posts: []
}
componentDidMount() {
    ... data is fetched from api
}

<div
    <PostForm />
    {this.state.posts.map(post => (
     <Post key={post.id} post={post} />
    ))}
</div>

在PostForm组件与新Post一起提交后，我将如何更新主状态，或者如何从api重新获取数据。

Answer 1

欢迎来到SO！

从子级设置父级状态：

如果您希望您的子组件能够访问父组件的状态，只需在父类中传递setState（）作为道具，就像这样...

<PostForm
    setParentState={(state) => this.setState(state)}
/>

然后，稍后在PostForm中。js，只需像这样设置父状态。。。。

this.props.setParentState(newParentStateObject);

或者，你甚至可以做。。。。

<PostForm
    postform={this}
/>

稍后，您可以使用调用postform中的任何内容。道具。postform。anyFunctionEver（）。

从父级设置子状态：

假设您现在想做相反的事情：从父组件更新子组件的状态？这也很简单，在定义时设置一个引用

<PostForm
    ref={(instance) => {this.postform = instance}}
/>

然后您可以直接在父类中设置postform的状态...

this.postform.setState(newChildStateObject);

状态可能会发生很多事情，所以如果您不确定，请尝试制作一个testFunc（）{console.log（'test'）；}，然后尝试在父级和子级之间传递/激活它。