时间戳

首页 > 解决方案 > 如何将更新后的 Context 的状态值传递给它的子组件？

javascript - 如何将更新后的 Context 的状态值传递给它的子组件？

问题描述

我正在开发一个反应应用程序，因此我需要在 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 组件状态属性用户]

标签： javascriptreactjs

解决方案

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

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

推荐阅读