Le contexte React ne met pas à jour tous les enfants

Question

J'ai deux composants qui utilisent un HOC pour obtenir des données d'un fournisseur de contexte.

Cependant, lorsque l'un des enfants met à jour l'état dans le fournisseur, cela ne semble pas se mettre à jour pour tous les composants qui utilisent le HOC, donc l'ancienne valeur est toujours affichée.

Pourquoi est-ce le cas, ou qu'est-ce que je fais mal ici? Comment puis-je obtenir la valeur mise à jour dans tous les composants?

Exemple simple de Stack Snippet démontrant le problème:

Answer 1

Vous créez un nouveau Provider à chaque fois que vous utilisez withUser.

Si vous souhaitez utiliser le même utilisateur dans toute l'application, vous pouvez placer le Provider en haut de votre composant App et ne faire créer un nouveau Consumer que par withUser.

const { Component } = React;
const { render } = ReactDOM;

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

class UserProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Colin",
      setName: this.setName,
    };
  }

  setName = (name) => { 
      this.setState({name});
  }

  render() {
    return {this.props.children};
  }
}

const withUser = Component => props => (
  {user => }
);

const TempA = ({name}) => { 
  return A: {name}
}

const TempB = ({name, setName}) => { 
  return (

    B: {name}
     setName('Ricardo')}>changer le nom

  )
}

const A = withUser(TempA);
const B = withUser(TempB);

const App = () => { 
  return (

  )
}

render(, document.getElementById('root'));