Javascript 为什么可以'；当提供程序组件父级状态更改时，是否更新子组件（使用react上下文）中的值？

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

我使用React上下文的这些特性来避免在组件之间传递道具。正如我在过去实施的那样

//父提供者

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}

const{Provider，Consumer}=React.createContext（）
类ShoppingCartProvider扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
顺序：{}，
总数：0，
}
}
addOrder=（键）=>{
常量顺序=this.state.order
让totalOrder=this.state.Total
顺序[键]=顺序[键]+1 | | 1
this.setState（{order}）
totalOrder=totalOrder+1
this.setState（{Total:totalOrder}）
}
render（）{
返回(
{this.props.children}
)
}
}
导出{ShoppingCartProvider，消费者作为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}来自“React”；
const ItemProducto=props=>{
const{product}=props
const{addOrder}=useContext（ShoppingCartConsumer）
返回
{
添加订单（产品编号）
}}>加
}
导出默认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

从“React”导入React，{useContext，useEffect，useState}；
const Header=props=>{
const{totalOrder}=useContext（ShoppingCartConsumer）
const[count，setcount]=useState（totalOrder）
useffect（（）=>{
setcount（总订单）
})
返回(
{count}
)
}
导出默认标题

---

当ItemProducto child更改Total state属性时，我希望在Header child中重新呈现。

代码中的所有内容都会签出，只有一个例外。

useContext（）

期望实际上下文作为参数，而不是使用者。在您的示例中，您通过以下操作传入了消费者：

export{…，consumer as ShoppingCartConsumer}

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

ShoppingCartContext

change中：

const{Provider，Consumer}=React.createContext（）

to

const ShoppingCartContext=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>
    );
  }

render（）{
返回(
{this.props.children}
);
}

然后将导出更改为：
export{ShoppingCartProvider，ShoppingCartContext}；

相应地修改
标题
和
ItemProducto
中的导入，不要忘记将
ShoppingCartContext
传递给各自的
useContext（）
s

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

请您在codesandbox上复制一下，我有兴趣看一下。只需在codesandbox中共享示例的链接即可