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

Question

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

3

我相信我在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 出了什么问题？

- kyw

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drew Reese · Accepted Answer

< p > 在 < code > useState 钩子中，< code > selectedTags 状态仅初始化一次。 < p > 如果 < code > tags 保持真实定义的数组（即使是空数组也是真实定义的），那么 < code > EditTagsModal 组件将通过 < code > {tags & amp; & amp; & lt; EditTagsModal existingTags = {tags} / & gt;} 呈现。如果 < code > tags 值，因此 < code > existingTags 属性更新并且 < code > EditTagsModal 被重新呈现，则应使用依赖于 < code > existingTags 属性的 < code > useEffect 钩子来在属性值更新时更新本地状态。

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

useEffect 带有依赖数组时，相当于类组件的 componentDidMount 和 componentDidUpdate 生命周期方法。