时间戳

首页 > 解决方案 > 仅当两个依赖项都更改时才运行效果挂钩

reactjs - 仅当两个依赖项都更改时才运行效果挂钩

问题描述

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

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>;
}

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

有没有一种干净的方法来依赖keyAND的组合options而不是使用 React Hooks的keyOR ？options

标签： reactjsreact-hooks

解决方案

您可以使用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我们为要跟踪的两个值创建一个对象，在本例中为 aname和age。ref 对象是previousValues.
  2. useEffect已定义，但我们不提供任何依赖项。name相反，只要or的状态发生变化，我们就让它执行 age。
  3. 现在在里面useEffect我们有条件逻辑来检查两者的先前/初始值是否与name它们age对应的状态值不同。如果它们很好，我们将执行我们的逻辑(console.log)。
  4. 最后在执行逻辑之后，将 ref 对象更新(previousValues)为当前值(state)。

推荐阅读