我相信我在React方面缺少了一些基础知识。
下面是代码:
在一个父组件中,
这是它的执行过程:
1. 假设 `existingTags` 起始为 `['hello']`。 2. `setSelectedTags` 正在运行。 3. `selectedTags` 现在是 `['hello', 'world', 'world']`。 4. 然后我将标签发送到服务器,关闭模态框,父级重新渲染。 5. 现在服务器返回的 `tags` 是去重后的 `['hello', 'world']`。 6. 问题来了:现在我再次打开模态框,仍然看到具有重复项的 `selectedTags` 中的值(在上面第二个 console.log 中),而不是从服务器返回的 `tags`(第一个 console.log)中的值。
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 出了什么问题?