Javascript 如何在循环内使用React setState？

我有一个

createRoleMember

函数，它更新组件的状态，以便React可以在组件内部重新呈现表（），并将新添加的

RoleMember

显示为行

  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

  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");
      });
  });

而不是：

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

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

如何在循环中调用

createRoleMember

（包含

setState

）呢

更多上下文

createRoleMember

函数在如下循环中被调用：

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

  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

  ：包含成员数据的对象，例如用户名、授权人、授权人

• newRow

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

---

我认为问题在于您的代码：

aliasArray.forEach（（currAlias）=>{
memberAttributes.alias=currAlias；//问题出在这里
// ...
axios
.post（/*…*/）
.然后（（）=>{
createRoleMember（成员属性）；
// ...
});
});

每次调用forEach回调时，您都会更新

memberAttributes.alias

的值。因此，在迭代了

aliasArray

的所有成员之后，

memberAttributes.alias

的值是

aliasArray

的最后一个值

因此，当您的请求返回并执行成功回调（

。然后（…）

）时，

memberAttributes.alias

将是每次调用的

aliasArray

的最后一个值。 我相信通过将

currAlias

传播到success回调，您的问题将得到解决，如：

aliasArray.forEach（（currAlias）=>{
memberAttributes.alias=curralas；
const marshalledObj=AWS.DynamoDB.Converter.marshall（memberAttributes）；
常量参数={
表名：“xxxx”，
项目：marshalledObj，
};
axios
.邮政(
"https://xxxxxx.execute-api.us-west-2.amazonaws.com/xxx/xxx",
params
)
.然后（（）=>{
memberAttributes.alias=curralas；
createRoleMember（成员属性）；
const newRow=document.getElementById(
`${currAlias}-${memberAttributes.Role}`//修改了此行
);
newRow.classList.add（“新行”）；
});
});
createRoleMember=（newRoleMember）=>{
this.setState（（prevState）=>{
返回{roleMembers:prevState.rolembers.concat（[{…newrolembers}]）；
});
};

我认为问题在于您的代码：

aliasArray.forEach（（currAlias）=>{
memberAttributes.alias=currAlias；//问题出在这里
// ...
axios
.post（/*…*/）
.然后（（）=>{
createRoleMember（成员属性）；
// ...
});
});

每次调用forEach回调时，您都会更新

memberAttributes.alias

的值。因此，在迭代了

aliasArray

的所有成员之后，

memberAttributes.alias

的值是

aliasArray

的最后一个值

因此，当您的请求返回并执行成功回调（

。然后（…）

）时，

memberAttributes.alias

将是每次调用的

aliasArray

的最后一个值。 我相信通过将

currAlias

传播到success回调，您的问题将得到解决，如：

aliasArray.forEach（（currAlias）=>{
memberAttributes.alias=curralas；
const marshalledObj=AWS.DynamoDB.Converter.marshall（memberAttributes）；
常量参数={
表名：“xxxx”，
项目：marshalledObj，
};
axios
.邮政(
"https://xxxxxx.execute-api.us-west-2.amazonaws.com/xxx/xxx",
params
)
.然后（（）=>{
memberAttributes.alias=curralas；
createRoleMember（成员属性）；
const newRow=document.getElementById(
`${currAlias}-${memberAttributes.Role}`//修改了此行
);
newRow.classList.add（“新行”）；
});
});
createRoleMember=（newRoleMember）=>{
this.setState（（prevState）=>{
返回{roleMembers:prevState.rolembers.concat（[{…newrolembers}]）；
});
};

为什么我不能在

之后立即执行
memberAttributes.alias=currAlias
然后

？我尝试了，但没有成功，既然没有成功，为什么

createRoleMember（memberAttributes，currAlias）

会成功？如果我

console.log（currAlias）出现奇怪的原因

我得到了两个日志，都是预期值。谢谢你的帮助，我很感激！@TheDaniel好的一点，你应该能够更新

成员属性。然后在中使用别名
，避免更改
createRoleMember
的签名。我相信这里有一个微妙的错误。你正在更新
成员属性createRoleMember
中）您正在将其推送到状态。但您从未重新分配
成员属性
，因此状态中的每个对象实际上都是对同一对象的引用。我已更新了答案，以包括此问题的修复。请注意，我现在正在使用createRoleMember中的对象扩展操作符创建新对象。为什么我不能执行
成员attributes.alias=curralalias
紧跟在
之后，然后
？我尝试了，但没有成功，既然没有成功，为什么
要创建角色记忆（memb