React输入defaultValue不会随着道具更改而更新

Question

我已经使用React，Redux和React Router创建了一个应用程序。 当URL更改时，应使用查询参数personId的值从数组中获取正确的person对象：

mapStateToProps = (state, router) => ({
    onePerson: state.persons.filter((person, i) => person.id === router.params.personId)[0]
})

我也有一个取决于该人姓名的输入元素：

<input type="text" defaultValue={this.props.onePerson.name} />

随着URL的更改和props更新，输入元素的defaultValue不会更改。 我该如何克服这个问题？ 请注意，我不想使用“受控输入”。

Answer 1

这是因为defaultValue仅在第一次呈现组件时使用。 如果以后需要更新该值，则必须使用受控输入。

更新：

从React Docs ：

defaultValue和defaultChecked道具仅在初始渲染期间使用。 如果需要在后续渲染中更新值，则需要使用受控组件。

我猜您可以删除并重新添加该组件以为其提供新的defaultValue ， 但您实际上不应该这样做 。

Answer 2

我发现销毁一个元素，清除所有数据并用替换为新元素很容易。

ReactDOM.unmountComponentAtNode(document.querySelector("#myParentElement"));

        if(document.querySelector("#myParentElement")){
            ReactDOM.render(
                <MyComponent name={name}  />,
                document.querySelector("#myParentElement")
            );
        };

您还可以使用此版本的unmount方法：

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);