重新渲染后未更新 useState 中的初始值答案

【问题标题】：Initial values in useState not updated after re-render重新渲染后未更新 useState 中的初始值
【发布时间】：2021-10-26 04:14:39
【问题描述】：

很确定我错过了一些关于 React 的基本知识。

代码如下：

export function EditTagsModal({existingTags}) {
  console.log('existingTags', existingTags);

  const [selectedTags, setSelectedTags] = React.useState(existingTags);

  console.log('selectedTags:', selectedTags);
  ...
}

在父组件中，<EditTagsModal /> 的使用方式如下：

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

这是如何下降的：

existingTags 以 ['hello'] 开头
setSelectedTags 正在做它的事情。
selectedTags 现在是 ['hello', 'world', 'world']。
然后我将标签发送到服务器，关闭模态，父级重新渲染。
现在服务器返回的tags 是['hello', 'world']，没有重复。
事情是这样的：现在我再次打开模式，我仍然在selectedTags（在上面的第二个console.log）中看到我的值，它有重复项，而不是tags（第一个console.log ) 来自我的服务器。

反应怎么了？

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

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

如果tags 仍然是一个真实定义的数组（即使是空数组也是真实和定义的），那么EditTagsModal 组件仍然由{tags && <EditTagsModal existingTags={tags} />} 挂载。如果tags 值，因此existingTags 属性更新并且EditTagsModal 被重新渲染，那么您应该实现一个useEffect 挂钩，该挂钩依赖于existingTags 属性，以在属性值更新时更新本地状态.

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

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

【讨论】：

是的，我实际上已经尝试过了。没有骰子。我想我的问题出在其他地方。但我会接受这个答案，因为这对于我提出的一般问题来说是确定的。谢谢！
@kyw 当然可以。如果您碰巧发布了有关对该问题进行更深入研究的新问题，请随时在此处通过链接向我发送电子邮件，我可以查看。

【解决方案2】：

正如在 cmets 中提到的那样，useState(existingTags)（或任何你称之为的）只会在第一次渲染时使用 existingTags。

在初始渲染期间，返回的状态（state）与作为第一个参数（initialState）传递的值相同。

在此之后，在重新渲染时，useState 函数不会根据传入的 props 的新更改来更改状态。

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


  console.log('selectedTags:', selectedTags);
  ...
}

【讨论】：

感谢您的回答。赞成:)