更新useContext中的值时，组件不会重新呈现 [英] Component not re rendering when value from useContext is updated

问题描述

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

我尝试使用Conext.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>
  )
}

export default OrderContext
export { OrderProvider }

//addToCartButton.js//

import React, { useContext } from "react"
import OrderContext from "../../../context/orderContext"

export default ({ price, productId }) => {
  const { addToOrder } = useContext(OrderContext)

  return (
    <button onClick={() => addToOrder(productId, 1)}>
      <span>${price}</span>
    </button>
  )
}

//cart.js//

import React, { useContext, useState, useEffect } from "react"
import OrderContext from "../../context/orderContext"

export default () => {
  const { products } = useContext(OrderContext)
  return <span>{products.length}</span>
}

//gatsby-browser.js//

import React from "react"
import { OrderProvider } from "./src/context/orderContext"
export const wrapRootElement = ({ element }) => (
   <OrderProvider>{element}</OrderProvider>
)

我预计Cart组件将在数组更新时显示数组的新长度，但实际上它保持不变，直到我导航到另一个页面时重新呈现该组件。我需要在每次更新上下文中的数组时重新呈现它。

推荐答案

该问题可能是因为您改变了数组(而不是设置新数组)，所以Reaction使用浅等式将该数组视为相同。

更改addOrder方法以分配新数组应该可以解决此问题：

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

这篇关于更新useContext中的值时，组件不会重新呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！