当提供程序组件 parent 状态更改时，为什么不能更新 child 组件（带有反应上下文）中的值？

Question

我正在尝试在我的项目中使用 React Context。我实现了一个提供程序组件，并在两个 child 组件中使用数据。但是当我从 children 之一更新 Provider 组件的状态时，另一个 child 不是 re-rendered 与来自提供程序组件的数据。

我正在使用 React Context 的这些特性来避免将 props 从一个组件传递到另一个组件。正如我过去实施的那样

Codesandbox Example

// Parent 提供商

const {Provider, Consumer} = React.createContext()

class ShoppingCartProvider extends React.Component{
 constructor(props){
            super(props)
            this.state = {
                  order: {},
                  Total: 0,

            }
      }

      addOrder = (key) => {
            const order = this.state.order
            let totalOrder = this.state.Total
            order[key] = order[key] + 1 || 1
            this.setState({order})
            totalOrder = totalOrder + 1
            this.setState({Total: totalOrder})

      }
      render(){
            return(
                  <Provider value={{
                        order: this.state.order,
                        addOrder: this.addOrder,
                        totalOrder: this.state.Total
                  }}>
                  <div>{this.props.children}</div>
                  </Provider>     
            )
      }
}

export {ShoppingCartProvider, Consumer as ShoppingCartConsumer}

// child 改变 parent 状态

import React, {useContext } from 'react';

const ItemProducto = props =>{
      const {product} = props

      const {addOrder} = useContext(ShoppingCartConsumer)

      return <Grid item>
                 <div css={botonAdd}
                   onClick={()=>{
                        addOrder(product._id)
                  }}>Add</div>
             </Grid>

}



export default ItemProducto

//这不是re-rendered当parent组件中的state发生变化



import React, {useContext, useEffect, useState} from 'react';

const Header = props =>{      

      const {totalOrder} = useContext(ShoppingCartConsumer)
      const [count, setcount] = useState(totalOrder)

      useEffect(()=>{
            setcount(totalOrder)
      })
      return (
           <div>                                                                
              <Grid item  css={numeroDinero}>{count}</Grid>                                                              
           </div> 

      )
}


export default Header

当 ItemProducto child 更改总状态属性.

时，我希望 Header child 中出现 re-render

Answer 1

您的代码中的所有内容都已检查，只有一个除外。 useContext() 期望实际上下文作为参数而不是消费者。在你的情况下，你通过这样做传递了消费者：export {..., Consumer as ShoppingCartConsumer }.

要解决此问题，您只需执行以下操作：在 ShoppingCartContext 中更改：

const { Provider, Consumer } = React.createContext() 至

const ShoppingCartContext = React.createContext();.

在你的render中：

render() {
    return (
      <ShoppingCartContext.Provider
        value={{
          order: this.state.order,
          addOrder: this.addOrder,
          totalOrder: this.state.Total
        }}
      >
        <div>{this.props.children}</div>
      </ShoppingCartContext.Provider>
    );
  }

然后将导出更改为：export { ShoppingCartProvider, ShoppingCartContext };

相应地修改 Header 和 ItemProducto 中的导入，并且不要忘记将 ShoppingCartContext 传递给它们各自的 useContext()。

有关 useContext 的更多信息，请参阅 here

当提供程序组件 parent 状态更改时，为什么不能更新 child 组件（带有反应上下文）中的值？

Why can't update a value in a child component (with react context) when a provider component parent state change?

javascript

react-context