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

Question

语境：

我正在研究vanilla React 和 React Bootstrap（没有 redux ）项目来管理我部门的角色。 角色列表并不真正相关，但对于上下文想象：管理员、经理、培训师等。

我有一个父组件<RoleContainer key={role} role={role} />元素，它具有以下 state：

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

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

问题：

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

目前，我必须将新的POST roleMember到数据库中，然后重新加载页面，以便可以反映更改。

当我发布新用户时，没有POST是否有一种可接受的方式（不是反模式或不良做法）来更新<CreateMemberModal /> <RoleContainer />组件的roleMembers state 属性？

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

Answer 1

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

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} />
    </>
}
}
 

并且您的子组件正在进行 post 调用以更新数据

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} />

每当您拥有新成员角色详细信息时，在<CreateMemberModal组件中调用this.props.updateRoleMembers(NEW ROLE MEMBER)

是否有任何关于如何执行此操作的文档可以指点我？ 当您说提供回调时，您的意思是我通过父母的道具将 function 传递给孩子吗？

在此处查看反应文档