javascript - 如何使用 useEffect 钩子(Hook)和依赖列表作为对象数组中的特定字段？

Question

假设我有一个这样的数组:

[
  {
    country: '',
    'city/province': '',
    street: ''
  },
  {
    country: '',
    'city/province': '',
    street: ''
  }
]

我如何拥有 useEffect()每次数组内任何项目中“国家”字段的值发生变化时， Hook 运行？

Answer 1

通常你不想这样做，但只是为了回答你的问题，它可以做到，所以让我提出以下假设你的列表被称为 items :

  useEffect(() => {
    
  }, [...items.map(v => v.country)])

上面的代码所做的是传播所有 items (及其 country 属性)到 useEffect依赖数组。
这可以是 adhoc 的原因主要是因为 React 不喜欢具有可变长度的依赖项。在源代码中，当长度发生变化时，它只欣赏现有元素的元素变化。因此，如果您从 1 个元素切换到 2 个元素，您可能会遇到问题。
但是，如果您有固定数量的元素，这应该可以满足您的需求。请记住 items必须始终是一个数组。
注意:为了适应长度问题，也许我们可以添加一个额外的变量 length到依赖数组:)

  }, [items.length, ...items.map(v => v.country)])

正如我所提到的，大多数时候，您应该避免这样做，而是尝试更改整个 items每次更改项目时。让 Item显示优化，如 React.memo .