reactjs - useEffect Hook - 如何检测状态数组中对象属性的变化

Question

useEffect 如何检测数组对象属性的变化
不知道状态数组大小，因为项目可能会动态添加

• 在这种特殊情况下，其中一个对象中的“价格”属性
  数组是一个状态

例如，如果更改价格属性 useEffect 将不会调用，下一次价格将相同(在 - localStorage.getItem 之后) >)
(在我的应用程序中，我以不同的方式动态更改它，例如)。

  const checkUseEffectLocalS = () => {     
    array[0]['Price'] = '12';    
    setItemsArray(array);
  };

  return (
    <>
      <div>
        <button
          onClick={() => checkUseEffectLocalS()}>
        Check
        </button>
    </>
  );

  useEffect(() => {
    localStorage.setItem(userItems, JSON.stringify(array));
  }, [array.map((item) => item.price)]); //Tried this way also but it didn't worked

尼特

  useEffect(() => {
    localStorage.setItem(userItems, JSON.stringify(array));
  }, [array]);  // won't work

数组结构

   array([
      {
        id: 1,
        productName: 'Vitamin',
        price: '10$',
      },
      {
        id: 2,
        productName: 'Powder',
        price: '26$',
      },
      {
        id: 3,
        productName: 'Multivitamin',
        price: '17.5$', 
      },
    ]);

在提问之前，我检查了非常相似的问题，但没有真正的答案 - stackoverflow

提前致谢。

Answer 1

不使用useEffect

const checkUseEffectLocalS = () => {   
let arr= [...array]
    arr[0]['Price'] = '12';    
  localStorage.setItem(userItems, JSON.stringify(arr))
    setItemsArray(prev=>arr);
  };

  return (
    <>
      <div>
        <button
          onClick={() => checkUseEffectLocalS()}>
        Check
        </button>
    </>
  )

通过使用useEffect

useEffect(() => {
  localStorage.setItem(userItems, JSON.stringify(array))
}, [JSON.stringify(array)])