Question

我有一个React组件，当我在子组件上调用onSubmit时需要更新它

需要更新的父组件如下所示：

componentDidMount() {
    axios.get('/todo')
        .then(function (response) {
            this.setState({
                todoList: response.data
            })
        }.bind(this))
        .catch(function (error) {
            console.log(error);
        });
}

render() {
    return (
        <div>
            <Form/>
            {this.state.todoList.map(todo => {
                return (
                    <TodoItem
                        id={todo._id}
                        key={todo._id}
                        itemToDo={todo.todoItem}

                    />
                );
            })}
        </div>
    )
  }

当我提交<Form/>组件时，我致电

handleSubmit(e) {
    e.preventDefault();
    axios.post('/todo', {
        todoItem: this.state.todoItem
    })
}

我需要更新父组件，以便从服务器获取更新列表

Answer 1

我不完全确定您的问题，但您可以将一个函数（updateParent）从父组件传递给子组件作为属性，当您想要更新父组件时，在您的子组件中调用this.props.propFromParentComponent 。如果要更新父组件，请使用this.setState（{..}）并更新组件的状态以更新此函数内部的父组件（updateParent）。

Answer 2

如果您有一个父组件正在侦听支持更改的商店，您可以让子组件更新商店，而商店将更新父商品。这可以假设你有一个单向的数据流。

如果您需要让子组件直接更新它的父级，那么AliF50提供的答案是可行的。

反应更新父组件

2 个答案: