当提供程序组件父级状态更改时，为什么不能更新子级组件中的值（具有react上下文）？

Question

我试图在我的项目中使用React上下文。我实现了一个提供程序组件，并在两个子组件中使用数据。但是，当我从其中一个子组件更新提供程序组件的状态时，不会用来自提供程序组件的数据重新呈现另一个子组件。

我使用React上下文的这些特性来避免将道具从组件传递到组件。就像我过去实施的那样

Codesandbox示例

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}

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

//父组件中的状态更改时，不会重新呈现

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子更改Total state属性时，我希望在Header子中重新呈现。

Answer 1

代码中的所有内容都会签出，只有一个除外。usecontext()期望实际上下文作为参数，而不是使用者。在您的示例中，您通过以下操作传入了消费者:export{...,consumer as ShoppingCartConsumer}。

解决此问题所需做的就是：在ShoppingCartContext更改中：

const{Provider,Consumer}=react.createContext()到

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}；

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

有关usecontext的更多信息，请参见此处