反应useEffect比较对象

Question

我正在使用react useEffect挂钩并检查对象是否已更改，然后才再次运行挂钩。

我的代码如下所示。

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

不幸的是，由于对象未被识别为相同对象，因此它一直在运行。

我相信以下是一个示例。

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

也许运行的JSON.stringify(apiOptions)作品？

Answer 1

使用apiOptions的状态值

我不确定您如何使用自定义钩子，但是apiOptions通过使用来创建状态值useState应该可以正常工作。这样，您可以将其作为状态值提供给自定义钩子，如下所示：

const [apiOptions, setApiOptions] = useState({ a: 1 })
const { data } = useExample(apiOptions)

这样，只有在使用时，它才会改变setApiOptions。

例子1

const [apiOptions, setApiOptions] = useState({ a: 1 })
const { data } = useExample(apiOptions)

或者

你可以写一个深可比useEffect的描述在这里：

function deepCompareEquals(a, b){
  // TODO: implement deep comparison here
  // something like lodash
  // return _.isEqual(a, b);
}

function useDeepCompareMemoize(value) {
  const ref = useRef() 
  // it can be done by using useMemo as well
  // but useRef is rather cleaner and easier

  if (!deepCompareEquals(value, ref.current)) {
    ref.current = value
  }

  return ref.current
}

function useDeepCompareEffect(callback, dependencies) {
  useEffect(callback, useDeepCompareMemoize(dependencies))
}

您可以像使用一样使用它useEffect。

Answer 2

如果您确定无法控制，apiOptions那么只需将原生 useEffect 替换为https://github.com/kentcdodds/use-deep-compare-effect。

Answer 3

我刚刚找到了适合我的解决方案。

你必须使用usePrevious()并_.isEqual()从Lodash。在中useEffect()，如果前一个 apiOptions等于当前 条件，则放置一个条件apiOptions。如果为true，则不执行任何操作。如果为false，则updateData（）。

范例：

const useExample = (apiOptions) => {

     const myPreviousState = usePrevious(apiOptions);
     const [data, updateData] = useState([]);
     useEffect(() => {
        if (myPreviousState && !_.isEqual(myPreviousState, apiOptions)) {
          updateData(apiOptions);
        }
     }, [apiOptions])
}

usePrevious(value)是创建一个自定义的钩子ref与useRef()。

您可以从官方的React Hook文档中找到它。

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

Answer 4

如果输入足够浅，您认为深度相等仍然很快，请考虑使用JSON.stringify：

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    const apiOptionsJsonString = JSON.stringify(apiOptions);

    useEffect(() => {
       const apiOptionsObject = JSON.parse(apiOptionsJsonString);
       doSomethingCool(apiOptionsObject).then(response => {               
           updateData(response.data);
       })
    }, [apiOptionsJsonString]);

    return {
        data
    };
};

请注意，它不会比较功能。