React useEffect 检测对象内部数组的变化

Question

我正在尝试使用 useEffect 挂钩根据状态变化调用 API。但是，我的 useEffect 无法检测到对 'type' 数组所做的更改。我尝试使用 use-deep-compare-effect 库，但它也无法检测到变化。

如何检测我的状态变化？

非常感谢任何帮助！

const [values, setValues] = useState({
        query: '',
        type: ["Tender & Auction", "Merger & Acquisition","Policy & Regulation", "Project Update", "Other"]
    })

 /// Re-run a query, after we check a filter
    useEffect(() => {
          searchAPI(values);
      }, [values]);

我正在像这样更改值：

 const handleChange = (newValues) => {
        console.log(newValues)
        setValues({ ...values, type: newValues})
   };

Answer 1

这是一种简单的比较方法，不会导致无限循环：

useEffect(() => {
    searchAPI(values);
}, [JSON.stringify(values)]);

或者如果您只需要跟踪类型属性:

useEffect(() => {
    searchAPI(values);
}, [JSON.stringify(values.type)]);

Answer 2

指定范围

useEffect(() => {
    searchAPI(values);
}, [values,values.type]);

React useEffect 检测对象内部数组的变化

React useEffect detect changes in an array inside the object

reactjs

use-effect