仅在两个依赖项都更改时运行效果挂接

Question

我有一个React组件，它使用useffect钩子获取数据，如下所示：

const cache = {key: "data-fetched-using-key"}
function Config({key, options}) {
    const [data, setData] = useState();
    useEffect(() => {
        const fetchedData; // fetch data using key and options
        setData(fetchedData);
        cache[key] = fetchedData;
    }, [key, options])
    return <p>{data}</p>;
}

每次键或选项更改时，都会运行钩子。但是，我也在本地缓存数据，并且只希望在键和选项都更改时运行效果（因为对于每个键/选项组合，数据总是相同的）。

是否有一种干净的方法来依赖于键和选项的组合，而不是使用React钩子的键或选项？

Answer 1

所有提供的解决方案都很好，但是有一些更复杂的情况，例如，当使用效果函数应该只在依赖关系A和B改变时调用，而它也取决于C的值。

所以我建议使用useffects序列和中间状态为未来的逻辑提供更多的空间。针对被问问题的这一方法的实施将是：

const cache = {key: "data-fetched-using-key"}
function Config({key, options}) {
    const [data, setData] = useState();

    const [needsUpdate, setNeedsUpdate] = useState(()=>({key:false, option:false}));

    useEffect(()=>{
      setNeedsUpdate((needsUpdate)=>({...needsUpdate, key:true}));
    },[key])

    useEffect(()=>{
      setNeedsUpdate((needsUpdate)=>({...needsUpdate, options:true}));
    },[options])

    useEffect(() => {
      if (needsUpdate.key && needsUpdate.options){
        const fetchedData; // fetch data using key and options
        setData(fetchedData);
        cache[key] = fetchedData;
        setNeedsUpdate(()=>({key:false, option:false}));
      }
    }, [needsUpdate, key, options])
    return <p>{data}</p>;
}

通过这种方式，我们可以在useEffect依赖项上应用几乎任何逻辑，但是它有自己的缺点，即渲染周期很少。

Answer 2

为了在两个值都更改时运行效果，您需要使用以前的值，并在关键点或选项更改时在挂钩内比较它们。

您可以编写一个usePrevioushook，并将旧状态和以前的状态进行比较，如本文所述：

如何在效果上比较旧值和新值？

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

const cache = {key: "data-fetched-using-key"}
function Config({key, options}) {
    const [data, setData] = useState();
    const previous = usePrevious({key, options});
    useEffect(() => {
        if(previous.key !== key && previous.options !== options) {
            const fetchedData; // fetch data using key and options
            setData(fetchedData);
            cache[key] = fetchedData;
        }
    }, [key, options])
    return <p>{data}</p>;
}

Answer 3

您可以使用useRef（）创建这种逻辑。考虑以下示例和沙盒：https://codesandbox.io/s/react-hooks-useeffect-with-multiple-reqs-6ece5

const App = () => {
  const [name, setName] = useState();
  const [age, setAge] = useState();

  const previousValues = useRef({ name, age });

  useEffect(() => {
    if (
      previousValues.current.name !== name &&
      previousValues.current.age !== age
    ) {
      //your logic here
      console.log(name + " " + age);
      console.log(previousValues.current);

      //then update the previousValues to be the current values
      previousValues.current = { name, age };
    }
  });

  return (
    <div>
      <input
        placeholder="name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <input
        placeholder="age"
        value={age}
        onChange={e => setAge(e.target.value)}
      />
    </div>
  );
};

工作流程：

1. 我们为要跟踪的两个值创建一个ref对象，在本例中，它是name和age。ref对象是previousValues
2. useffect已定义，但我们不提供任何依赖项。相反，只要状态更改为name或age，我们就让它执行
3. 现在在useffect中，我们有条件逻辑来检查name和age的先前值/初始值是否与其对应的状态值不同。如果它们很好，我们就执行逻辑（console.log）
4. 最后，在执行逻辑后，将ref对象（以前的值）更新为当前值（状态）