如何在循环中使用 React setState？

Question

我有这个 createRoleMember 函数更新组件的状态，因此 React 可以在组件内重新渲染 table () 并将新添加的 roleMembers 显示为行。

  createRoleMember = (newRoleMember) => {
    this.setState((prevState) => {
      return { roleMembers: prevState.roleMembers.concat([newRoleMember]) };
    });
  };

当我添加一个成员时，代码有效，但如果数组包含多个值，createRoleMember 函数会使用正确数量的新行但使用相同的重复用户名重新呈现表（总是重复数组中的最后一个用户名）。

例如，如果数组看起来像这样 `["testOne, "testTwo", "testThree"]，那么表格将像这样重新渲染：

testthree   xxx Aug 25, 2020    
testthree   xxx Aug 25, 2020    
testthree   xxx Aug 25, 2020

代替：

testtone    xxx Aug 25, 2020    
testttwo    xxx Aug 25, 2020    
testthree   xxx Aug 25, 2020

如果我重新加载页面，表格会显示正确的数据。

如何在循环中调用createRoleMember（其中包含setState）？

更多上下文

createRoleMember 函数在如下所示的循环中调用：

  aliasArray.forEach((currAlias) => {
    memberAttributes.alias = currAlias;
    const marshalledObj = AWS.DynamoDB.Converter.marshall(memberAttributes);

    const params = {
      TableName: "xxxx",
      Item: marshalledObj,
    };

    axios
      .post(
        "https://xxxxxx.execute-api.us-west-2.amazonaws.com/xxx/xxx",
        params
      )
      .then(() => {
        createRoleMember(memberAttributes);
        const newRow = document.getElementById(
          `${memberAttributes.alias}-${memberAttributes.Role}`
        );
        newRow.classList.add("new-row");
      });
  });

• aliasArray: 一个字符串数组，如 "username1","username2"。

• memberAttributes：包含成员数据的对象，例如，用户名、grantedBy、grantedOn。

• newRow：允许我向用户提供反馈（以绿色突出显示新行）。

Answer 1

我认为问题出在您的代码中：

aliasArray.forEach((currAlias) => {
    memberAttributes.alias = currAlias; // Here's the problem

    // ...

    axios
      .post(/*...*/)
      .then(() => {
        createRoleMember(memberAttributes);
        // ...
      });
  });

每次调用 forEach 回调时，都会更新memberAttributes.alias 的值。所以aliasArray的所有成员都迭代完之后，memberAttributes.alias的值就是aliasArray的最后一个值。

因此，当您的请求返回并执行成功回调 (.then(...)) 时，memberAttributes.alias 将是每次调用的最后一个 aliasArray 值。 我相信您的问题可以通过将currAlias 传播到成功回调来解决，例如：

aliasArray.forEach((currAlias) => {
    memberAttributes.alias = currAlias;
    const marshalledObj = AWS.DynamoDB.Converter.marshall(memberAttributes);

    const params = {
      TableName: "xxxx",
      Item: marshalledObj,
    };

    axios
      .post(
        "https://xxxxxx.execute-api.us-west-2.amazonaws.com/xxx/xxx",
        params
      )
      .then(() => {
        memberAttributes.alias = currAlias;
        createRoleMember(memberAttributes); 
        const newRow = document.getElementById(
          `${currAlias}-${memberAttributes.Role}` // Modified this line
        );
        newRow.classList.add("new-row");
      });
  });


createRoleMember = (newRoleMember) => {
    this.setState((prevState) => {
      return { roleMembers: prevState.roleMembers.concat([{...newRoleMember}]) };
    });
  };