React Context API - получить обновленное значение состояния

Question

Я экспериментирую с контекстом API React,

Пожалуйста, отметьте someComponent функцию, где я передаю событие клика (updateName функция), затем state.name обновление значения из GlobalProvider функция

после обновления state.name будет отображаться в браузере, но не получит обновленное значение в консоли (я вызвал console ниже функции линии щелчка, чтобы получить обновленное значение ниже)

Почему бы не получить обновленное значение в этой консоли, но он попадает внутрь рендера (в браузере)?

Пример кода

App function
    <GlobalProvider>
      <Router>
        <ReactRouter /> 
      </Router>
    </GlobalProvider>

=== 2

class GlobalProvider extends React.Component {
  state = {
    name: "Batman"
  };

  render() {
    return (
      <globalContext.Provider
        value={{
          name: this.state.name,
          clickme: () => { this.setState({ name: "Batman 2 " }) }
        }}
      >
        {this.props.children}
      </globalContext.Provider>
    );
  }
}

export default GlobalProvider;

== = 3

const SomeComponent = () => {
     const globalValue = useContext(globalContext);

    const updateName = ()=> {
           globalValue.clickme();
           console.log(globalValue.name ) //*** Here is my concern - not getting updated value here but , getting updated value in browser  
     }


     return (
    <div onClick={(e)=> updateName(e) }>
       {globalValue.name}//*** In initial load display - Batman, after click it display Batman 2 
     </div>) }

Answer 1

Состояние реакции не является наблюдателем, как Vue или Angular состояния, что означает, что вы не можете получить обновленные значения точно сразу после их изменения.

Если вы хотите получить обновленное значение после изменения Затем вы можете воспользоваться этим решением:

class A extends Component {
   state = {
     name: "Test"
   }

   updateName = () => {
     this.setState({name: "Test 2"}, () => {
       console.log(this.state.name) // here, name has been updated and will return Test 2
     })
   }
}

Итак, вам нужно написать функцию обратного вызова для clickme и вызвать ее, как показано ниже:

class GlobalProvider extends React.Component {
  state = {
    name: "Batman"
  };

  render() {
    return (
      <globalContext.Provider
        value={{
          name: this.state.name,
          clickme: (callback) => { this.setState({ name: "Batman 2 " }, () => callback(this.state.name)) }
        }}
      >
        {this.props.children}
      </globalContext.Provider>
    );
  }
}

export default GlobalProvider;

И для использования:

const SomeComponent = () => {
     const globalValue = useContext(globalContext);

    const updateName = ()=> {
       globalValue.clickme((name) => {
          console.log(name) // Batman 2
       });
     }


     return (
    <div onClick={(e)=> updateName(e) }>
       {globalValue.name}//*** In initial load display - Batman, after click it display Batman 2 
     </div>) 
}