Почему нельзя обновить значение в дочернем компоненте (с контекстом реакции) при изменении родительского состояния компонента поставщика?

Question

Я пытаюсь использовать React Context в моем проекте.Я реализовал компонент поставщика, и я использую данные в двух дочерних компонентах.Но когда я обновляю состояние компонента «Провайдер» от одного из дочерних элементов, другой дочерний элемент не перерисовывается с данными из компонента провайдера.

Я использую эти характеристики контекста 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

Я ожидаю повторную визуализацию в дочернем Header, когда дочерний элемент ItemProducto изменяет свойство Total State.

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 см. здесь