React 输入默认值不会随道具更改而更新

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 文档

：

defaultValue 和 defaultChecked 属性仅在初始阶段使用 使成为。如果您需要在后续渲染中更新该值，您可以 将需要使用受控组件。

我猜你

可以

删除并重新添加组件以给它一个新的defaultValue，

但你真的不应该

。

Answer 2

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

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

您也可以使用此版本的卸载方法：

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

Answer 3

useEffect

钩子跟踪 props 变化。

// Keep an optimistic value so that the ui is responsive in case of slow onChange
const [optimisticValue, setOptimisticValue] = React.useState(props.value);
useEffect(() => {
  setOptimisticValue(props.value);
}, [props.value]);

然后在您的输入中

onChange

：

setOptimisticValue(e.target.value);
props.onChange(e.target.value);