javascript - React - 添加键会干扰 child 的状态

Question

有一个需要 key 的父元素(因为它位于创建警告消息的列表中)，我添加了 key={uuid.v4()}。这使得该消息消失。

不过，有趣的事情开始发生在它的子组件上。当我使用函数 setState Hook 时，它实际上不再将其分配给该值(请参见下面的 [1])。当我从父组件中删除 key 时，相同的代码可以工作(但留下警告)。添加静态 key 时，例如key={'someComponent'}，整个组件根本不渲染。我在这里缺少什么提示吗？

[1] 不更新其状态的子组件:

function zoomIntoRegion(countryName, filter) {
    props.changeFilter({SLMetric: filter})
    if (regionZoom === countryName && filter === props.filter) {
        setRegionZoom(undefined)
    } else {
        console.log('before setzoom', countryName) // # before setzoom GERMANY
        setRegionZoom(countryName)
        console.log('after', regionZoom) // # after undefined
    }
}

Answer 1

React 中的键用于快速比较当前子级与发生任何更改之前的子级。当您在渲染函数中将组件上的 key 设置为 uuid.v4() 时，每次父组件重新渲染时，您都可以看到它生成了一个新的 key。来自 docs :

Keys should be stable, predictable, and unique. Unstable keys (like those produced by Math.random()) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.

这似乎准确地定义了您所面临的情况。

要解决此问题，

1. 如果您没有看到子级的顺序发生任何变化，那么可以使用 index 作为键。
2. 如果您确实看到它发生变化并且数据中没有可以使用的 key ，请将 key 生成设置移至您要获取/生成数据的位置，以便仅执行一次。确保键在渲染时不会更改，而仅在数据本身更改时更改。

function App() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    getData()
      // mapping over array data and adding the key here
      .then((data) => data.map((item) => ({...item, id: uuid.v4() })))
      .then((data) => setItems(data))
  }, []);
  return (
    <Fragment>
      // using the key
      {items.map((item) => {
        <div key={item.id}>

        </div>
      })}
    </Fragment>
  )
}