小编Jor*_*Paz的帖子

我正在使用 React 的上下文 api 来存储一组项目。有一个组件可以通过 useContext() 访问这个数组并显示数组的长度。还有另一个组件可以访问该函数以通过 useContext 更新此数组。将项目添加到数组时，组件不会重新渲染以反映数组的新长度。当我导航到应用程序中的另一个页面时，组件会重新呈现并反映数组的当前长度。每当上下文中的数组发生变化时，我都需要组件重新渲染。

我曾尝试使用 Context.Consumer 而不是 useContext 但是当数组更改时它仍然不会重新呈现。

//orderContext.js//

import React, { createContext, useState } from "react"

const OrderContext = createContext({
  addToOrder: () => {},
  products: [],
})

const OrderProvider = ({ children }) => {
  const [products, setProducts] = useState([])

  const addToOrder = (idToAdd, quantityToAdd = 1) => {
    let newProducts = products
    newProducts[newProducts.length] = {
      id: idToAdd,
      quantity: quantityToAdd,
    }
    setProducts(newProducts)
  }

  return (
    <OrderContext.Provider
      value={{
        addToOrder,
        products,
      }}
    >
      {children}
    </OrderContext.Provider> …