如何使用 useEffect 挂钩和依赖项列表作为对象数组中的特定字段？

Question

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

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

useEffect()每次数组内任何项目中“国家/地区”字段的值发生变化时，如何让挂钩运行？

Answer 1

我认为您无法在依赖项数组中专门处理它，但是，您可以在 内部进行检查useEffect以获得相同的总体结果。

基本上，依赖项数组会传递完整的数据状态，这将在每次更改时触发效果，然后您进一步检查子属性是否已更改。

为了简洁起见，我利用了 lodash，但您可以运行任何函数来确定数据是否已更改。

代码笔：https://codepen.io/chrisk7777/pen/mdMvpvo? editors=0010

const { useState, useEffect, useRef } = React;
const { render } = ReactDOM;
const { isEqual, map } = _;

const App = () => {
  const [data, setData] = useState([
    {
      country: "",
      "city/province": "",
      street: ""
    },
    {
      country: "",
      "city/province": "",
      street: ""
    }
  ]);
  const prevData = useRef(data);

  // hacky updates just to demonstrate the change
  // change country - should trigger useEffect
  const update1 = () => {
    setData((s) => [s[0], { ...s[1], country: s[1].country + "a" }]);
  };

  // change street - should not trigger useEffect
  const update2 = () => {
    setData((s) => [s[0], { ...s[1], street: s[1].street + "a" }]);
  };

  useEffect(() => {
    if (!isEqual(map(prevData.current, "country"), map(data, "country"))) {
      console.log("country changed");
    }

    prevData.current = data;
  }, [data]);

  return (
    <div>
      <button onClick={update1}>change country - trigger effect</button>
      <br />
      <button onClick={update2}>change street - do not trigger effect</button>
    </div>
  );
};

render(<App />, document.getElementById("app"));