Question

我有一个包含很多条目的 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;

Answer 1

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

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

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

1 个答案: