反应父组件状态更新但子不重新渲染答案

【问题标题】：React parent component state updates but child does not re-render反应父组件状态更新但子不重新渲染
【发布时间】：2021-02-05 13:27:24
【问题描述】：

我有一个包含很多条目的 React 应用，每个条目可以有很多标签。

它是一个审核应用程序，因此条目会列在页面上，用户可以单击条目对其进行审核（例如，添加或删除标签）。单击后，该条目将显示在模式中。

一旦模式打开，用户可以使用“下一步”按钮链接条目，这样模式就不会关闭。当用户单击“下一步”时，下一个条目会加载到模式中。

在模态中，我有一个 react CreatableSelect 组件，它获取已加载条目的标记列表。

问题是当用户点击“下一步”时，CreatableSelect 中的标签没有更新，它仍然显示第一个加载条目的标签。

这是代码，经过转换以使我的问题更清楚。

首先，组件加载了一个空的代码数组
其次，触发 useEffect 并使用 2 个虚拟代码填充状态

虽然当我 console.log 状态时，它已使用 2 个虚拟代码正确更新，但 CreatableSelect 仍然显示为空。

我想了解的是为什么 CreatableSelect 不会以新状态重新渲染？

谢谢！

const SelectTags = ({ nextEntry, entry, topicId, updateEntry }) => {

  const projectCodes = useSelector(state => state.project.codes);
  const formatedCodes = projectCodes.map(code => ({value: code, label: code, isFixed: true}) );
  const [selectedTags, setSelectedTags] = useState([]);

  useEffect(() => {
    const newTags = [{value: 'hello', label: 'hello'}, {value: 'world', label: 'world'}];
    setSelectedTags([...newTags]);
  }, [entry]);

  const handleChange = newValue => setSelectedTags([...newValue]);

  const setSubmittingFalse = () => setSubmitting(false);

  return (
    <CreatableSelect isMulti onChange={handleChange} options={formatedCodes} defaultValue={selectedTags} />
  )
};

export default SelectTags;

【问题讨论】：

您是否尝试过查看 CreatableSelect 组件中的 defaultValue 属性？更新了吗？
How to create a Minimal, Reproducible Example
@TheTisibo 感谢您的评论！是的，defaultValue 道具不会更新。你知道为什么吗？
使用提供的代码，我不能说。但正如@DennisVash 建议的那样，您可以向我们提供一个可复制的示例！
是的，我正在尝试了解如何将代码 sn-p 与 React 一起使用

标签： javascript reactjs

【解决方案1】：

好的，将 CreatableSelect 道具从 defaultValue 切换到 value 显然解决了这个问题！

<CreatableSelect key={entry.id} isMulti onChange={handleChange} options={formatedCodes} value={tags} />

【讨论】：