javascript - 使用效果及观看状态

Question

我正在尝试使用函数调用在渲染时设置项目的状态，然后观察项目状态的变化，以便在它们发生变化时重新渲染。根据建议的答案似乎没有改变任何东西。我正在尝试使用钩子(Hook) useEffect() 来做到这一点。 getCart() 是一个从 localStorage 检索数据的函数。代码:

const [items, setItems] = useState([]);

useEffect(() => {
    setItems(getCart());
}, [items]);

我收到错误“超出最大更新深度。当组件在 useEffect 内调用 setState，但 useEffect 没有依赖项数组，或者依赖项之一在每次渲染时发生更改时，可能会发生这种情况。”

我明白我如何通过有效地更改渲染上的项目状态来导致无限循环，然后这会导致重新渲染等等。我该如何解决这个问题，这可以使用 useEffect 吗？谢谢。

编辑:编辑 localStorage 的代码

export const updateItem = (productId, count) => {
   let cart = [];
   if (typeof window !== 'undefined') {
        if (localStorage.getItem('cart')) {
            cart = JSON.parse(localStorage.getItem('cart'));
        }
        cart.map((product, index) => {
            if (product._id === productId) {
                cart[index].count = count;
            }
        })
        localStorage.setItem('cart', JSON.stringify(cart));
    }
}

Answer 1

正如评论中所建议的，解决方案是将 setItems 调用移出 useEffect 并与 updateItem 一起在其他地方调用它在 localStorage 中保存/更新数据的函数:

// cart.js
export const updateItem = (productId, count) => {
  // see implementation above
}

// App.js
function App() {
  const [items, setItems] = useState([])

  useEffect(() => {
    const cartItems = getCart()
    setItems(cartItems)

  // pass an empty dependency array so that this hook
  // runs only once and gets data from `localStorage` when it first mounts
  }, [])

  const handleQuantityChange = (data) => {
    // this will update `localStorage`, get new cart state
    // from `localStorage`, and update state inside of this component

    updateItem(data.productId, data.count)
    const currentCart = getCart()
    setItems(currentCart)
  }

  return (
    <div>
      {...}
      <button onClick={() => handleQuantityChange(...)>
        Add more
      </button>
    </div>
  ) 
}

这样，调用 setItems 就可以了，因为只有单击按钮时才会触发它。

此外，由于 useEffect 采用空依赖数组，因此它不会再导致 超出最大更新深度 错误，因为它只会运行一次以获取初始状态localStorage 一旦呈现，该组件的本地状态将在 handleQuantityChange 处理程序内更新。