Javascript 如何在React.js中动态更新状态？

每当我选择一个用户时，我想动态更新stateCurrentIndex。现在我正在将其硬编码为0。我想改变这一点。

每当单击用户列表时，我都想更新currentIndex。
侧面板包含用户数组及其输出名lastname

class Home extends Component {
  state = {  
    loadUsers: [],
    currentIndex: 0,
  };

  async componentDidMount() {

    const res = await axios.get("http://localhost:5000/users");
    this.setState({ loadUsers: res.data });
  }

  render() {

    return (
      <Fragment>
        <div className="row">
          <div className="col-md-3" style={{ backgroundColor: "#303F9F" }}>
            <Typography variant="h6">List all Counsellors</Typography>
            {this.state.loadUsers.map((user) => {
              const { _id, firstname, lastname } = user;
              return (
                <div key={_id}>
                  <SidePanel
                    id={_id}
                    firstname={firstname}
                    lastname={lastname}
                  />
                </div>
              );
            })}
          </div>
          <div className="col-md-4">
            {this.state.loadUsers.length > 1 && (
              <div>
                <MiddlePanel
                  user={this.state.loadUsers[this.state.currentIndex]}
                />
              </div>
            )}
          </div>
        </div>
      </Fragment>
    );
  }
}

class Home扩展组件{
状态={
loadUsers:[]，
当前索引：0，
};
异步组件didmount（）{
const res=等待axios.get（“http://localhost:5000/users");
this.setState（{loadUsers:res.data}）；
}
render（）{
返回(
列出所有顾问
{this.state.loadUsers.map（（用户）=>{
const{u id，firstname，lastname}=user；
返回(
);
})}
{this.state.loadUsers.length>1&&(
)}
);
}
}

创建一个处理程序来使用映射的索引，并在需要的地方传递/附加处理程序

class Home extends Component {
  state = {  
    loadUsers: [],
    currentIndex: 0,
  };

  ...

  incrementIndex = (currentIndex) => (e) => this.setState({ currentIndex });

  render() {

    return (
      <Fragment>
        <div className="row">
          <div className="col-md-3" style={{ backgroundColor: "#303F9F" }}>
            ...
            {this.state.loadUsers.map((user, index) => {
              const { _id, firstname, lastname } = user;
              return (
                <div key={_id}>
                  <SidePanel
                    id={_id}
                    firstname={firstname}
                    lastname={lastname}
                    onClick={incrementIndex(index)} // <-- pass handler to Panel
                  />
                </div>
              );
            })}
          </div>
          ...
        </div>
      </Fragment>
    );
  }
}

class Home扩展组件{
状态={
loadUsers:[]，
当前索引：0，
};
...
incrementIndex=（currentIndex）=>（e）=>this.setState（{currentIndex}）；
render（）{
返回(
...
{this.state.loadUsers.map（（用户，索引）=>{
const{u id，firstname，lastname}=user；
返回(
你能提供你的代码尝试递增
this.state.currentIndex
？我在当前代码段中没有看到任何处理程序或逻辑。