useState中的初始值在重新渲染后没有更新

Question

我很确定我错过了React的一些基本内容。

代码是这样的:

export function EditTagsModal({existingTags}) {
console.log('existingTags', existingTags);
const [selectedTags, setSelectedTags] = React.useState(existingTags);
console.log('selectedTags:', selectedTags);
...
}

在父组件中，<EditTagsModal />是这样被使用的:

{tags && <EditTagsModal existingTags={tags} /> }

是这样的:

1. existingTags以['hello']
开头
2. setSelectedTags正在做它的事情。
3. selectedTags现在是['hello', 'world', 'world']。
4. 然后我发送标签到服务器，关闭模态，重新渲染。
5. 现在服务器返回的tags是['hello', 'world']，没有副本。
6. 事情是这样的:现在我再次打开模态，我仍然看到我的值在selectedTags(在上面的第二个console.log)有重复，而不是tags(第一个console.log)从我的服务器。

react怎么了?

Answer 1

useState钩子中的selectedTags状态只初始化一次。

如果tags仍然是一个真实定义的数组(即使空数组也是真实定义的)，那么EditTagsModal组件仍然由{tags && <EditTagsModal existingTags={tags} />}挂载。如果tags的值，因此existingTags的道具更新和EditTagsModal被重新渲染，那么你应该实现一个useEffect钩子，它依赖于existingTags的道具，在道具值更新时更新本地状态。

useEffect(() => {
setSelectedTags(existingTags);
}, [existingTags]);

带有依赖数组的useEffect等同于类组件的componentDidMount和componentDidUpdate生命周期方法。