Question

我的应用程序包含两个组件，

包含用户列表的ListComponent（父级）
显示用户信息的UserComponent（子级）

用户列表页面：

1 << 23

用户页面：

<ListComponent 
   data={this.props.users} 
   renderItem={(item) => <UserComponent user={item} />}
/>

道具状态：

render(){
    let { user, followers } = this.props;
    user = {
    ...user,
    ...followers
}
    return (
<div> 
   <span>{user.totalFollowers}</span>
   <button onClick={() => reduxHelper(user.totalFollowers + 1)}></button>
</div>)
}

异径管：

mapStatetoProps = (state) => ({
  followers: state.user.followers 
})

成功之后：

initial_state = {
followers: {}
}

当用户（设备用户）单击将用户道具发送到UserComponent的用户图标时，我正在使用redux状态保存用户列表，其中显示了用户信息。如果用户（设备用户）单击“跟随”按钮，则使用redux和redux-saga更新后端和用户配置文件信息。

上述代码无法全局更新用户数据（Redux状态）
或者我可以更新整个列表吗？
我遵循正确的方法吗？

Answer 1

两种处理此类一般性问题的方法。

从“父级”组件向子级发送方法作为prop。在此方法内部，调度操作以更新商店。等等。在内部子组件中，例如

<div onClick={()=>this.props.methodFromParent(send some data if needed)}

内部父级使用该方法并更新商店.. ex

<ChildComponent methodFromParent={(someData)=>this.methodFromParent(someData)} .. 现在在methodFromParent内部更新商店

methodFromParent = ()=>{this.props.dispatch(whatever workflow u r using)}
形成子组件本身..使用store.dispatch() 因此，首先要在子组件内部导入存储，然后您可以使用sotre.dispatch(someaction)。但是这种方法不好。.您应该以上述方法设置项目。并使用这些store.dispatch(), store.getState()。在紧急情况下，您无权访问mapStateToProps等。

将数据从父组件传递到子组件时如何处理redux状态

1 个答案: