如何获取更新上下文状态值到其子组件？

Question

我正在开发一个反应应用程序，所以我需要在 Context 组件的状态发生变化时立即更新 Context 组件的所有子组件，但我无法获取更新后的上下文值。

export default class Home extends Component{
    state = {
       user:{name:"Rob"},

    }
    componentDidMount() {
        this.setState({user:this.context.user});
    }

    render(){
         return(
              <DetailsConsumer>
                   {value=>(
                        <button onClick={value.setName} >
                    )}
              </DetailsConsumer>



);
} 

class DetailsProvider extends Component{

    state={
       user:{}
    }


     setName= ()=>{
        this.setState({user:{name:"Hasindu"}})
     }
    render(){
        return(<DetailsContext.Provider value={
            {user:this.state.user,

                changeName:this.changeName

            }
        }>

            {this.props.children}
        </DetailsContext.Provider>);
    }
}

const DetailsConsumer = DetailsContext.Consumer;
export{DetailsConsumer,DetailsProvider,DetailsContext};

所以我需要的是，当我单击 Home 类的按钮并调用 DetailsProvider (Context) 的 setName() 方法时，我需要将上下文状态更新为 setName() 方法中的对象，我还需要获取更新后的值到我的 Home 类。[这意味着我需要使用该新值更新我的 Home 组件状态属性用户]

Answer 1

问题是您的Home 组件正在复制上下文状态，因此在上下文状态更新时没有更新其状态。解决此问题的最佳方法是删除 Home 中的重复状态并直接使用上下文状态。

export default function Home(){    
     return(
          <DetailsConsumer>
               {value=>(
                    <>{value.user.name}: <button onClick={value.setName} /></>
                )}
          </DetailsConsumer>
     )
}