Question

上下文：

我正在研究 vanilla React和React Bootstrap（ no redux ）项目，以管理部门中的角色。角色列表并不是真正相关，但可以根据上下文进行想象：管理员，经理，培训师等。

我有一个父组件<RoleContainer key={role} role={role} />元素，它的状态如下：

this.state = {
  collapsed: true,
  roleAttributes: [],
  roleMembers: [],
  isLoading: true,
};

在<RoleContainer />内，有一个<table/>元素，其中包含一个roleMembers.map以循环遍历roleMembers并动态呈现表行。因此，对于每个角色成员，您都会获得一个表格行。

问题：

我有一个名为<CreateMemberModal role={role} roleAttributes={roleAttributes} />的组件，它是<RoleContainer />的子组件，它允许用户POST新建一个roleMember。

当前，我必须POST将新的roleMember放入数据库，然后重新加载页面，以便更改可以反映出来。

有没有一种可以接受的方式（不是反模式或不良做法），而无需进行重新处理以在我roleMembers时从子<RoleContainer />内部更新<CreateMemberModal />组件的POST状态属性{1}}个新用户？

这将允许我仅重新渲染具有新角色成员的<RoleContainer />，而不是重新加载整个页面。

Answer 1

您可以使用callBack功能... 我假设您的结构将是这样...

export class RoleContainer extends React.Component {
    this.state = {
    collapsed: true,
    roleAttributes: [],
    roleMembers: [],
    isLoading: true,
};

yourApiCallToUpdateRoleMembers = () => {
    apiCall().then(response => {
        this.setState({
            roleMembers: response // assuming response has the data
        })

    })
}

render(){
    return <>
        <table>
            {this.state.roleMembers.map(element => <tr></tr>)}
        </table>
        <CreateMemberModal role={role} roleAttributes={roleAttributes} /> // instead of this add a callback function also

        <CreateMemberModal role={role} roleAttributes={roleAttributes} successCb={yourApiCallToUpdateRoleMembers} />
    </>
}
}

您的子组件正在进行邮寄呼叫以更新数据

export function CreateMemberModal(props) {
    makePostCall = () => {
        apiCall().then(response => {
            props.successCb()
        })
    }
}

Answer 2

在<RoleContainer />中添加一个方法来更新roleMembers

// bind this in constructor 
updateRoleMembers(newRoleMember) {   
   this.setState((prevState)=> {
       return {roleMembers : prevState.roleMembers.concat([newRoleMember])}
   }
}

现在将此方法传递给CreateMemberModal

<CreateMemberModal role={role} roleAttributes={roleAttributes} updateRoleMembers={this.updateRoleMembers} />

当您拥有新的成员角色详细信息时，

在this.props.updateRoleMembers(NEW ROLE MEMBER)组件中像<CreateMemberModal一样调用

您是否可以找到有关如何执行此操作的任何文档？当您说提供回调时，您是说我通过了一个函数从父母到孩子的道具？

检查反应文档here

从React中的子组件更改父状态（无Redux）

2 个答案: