useEffect 在用于设置输入值时引发错误

Question

我正在尝试制作一个由 react 控制的输入组件，每当 props 发生变化时都会更新它的值。

这就是我的做法：

import React from 'react';
function Component(props) {
const [url, setUrl] = React.useState(props.value);
React.useEffect(() => {
setUrl(props.value);
}, [props.value]);
function handleChange(event) {
setUrl(event.target.value)
}
return (
<div>
<input
type="text"
onChange={handleChange}
value={url}
/>
</div>
);
}

尽管逻辑有效，但我仍然收到一个错误，说我的组件正在从受控切换到不受控制，但我不明白为什么会这样。

Answer 1

我不明白在这里useEffect的目的。如果父组件的状态发生变化，则子组件的 props 将自动更新，因为它将触发重新渲染。只需删除您的useEffect代码，它应该可以正常工作。

此外，我相信这将触发无限循环，因为每次更新url时，它都会触发useEffect钩子，这将更新url，这将触发useEffect等。

在props.value上设置默认值也是一个好主意：

const [url, setUrl] = React.useState(props.value || '');

顺便说一下，我会使用useCallback作为您的handleChange方法。

const handleChange = React.useCallback((event) => setUrl(event.target.value), []);

这将记住函数以获得更好的性能。

Answer 2

更改

const [url, setUrl] = React.useState(props.value);

自

const [url, setUrl] = React.useState(props.value || '');

因为一开始props.value(和你的url(将是未定义的，然后被定义。 这意味着输入字段从不受控制转换为受控。