Question

我已声明一个空列表，该列表用于保存组的名称。刷新屏幕时，我进行了api调用，并获取了该成员所属的组的列表。我在设置从API获得的名称列表到状态时遇到麻烦。目前，它的列表大小为3，只是将整个数组作为一个字符串放置，而不是将其设置为值数组。

var objArray = JSON.parse(JSON.stringify(groups.data.data.getUser.groups));
    console.log(objArray);

    //These are the string arrays that need to be set to the state to update the card
    let names = objArray.map(({ name })=> name);
    console.log('Names: ' + names.length); //This is 3

    this.setState({ groupNames: [`${names}`] });

    console.log(this.state.groupNames.length);//This outputs 1 when it should be 3

Answer 1

应为：

this.setState({ groupNames: names});

您通过使用[names]而不是简单的names将names数组放置在一个新数组中，此新数组只有一个子：names数组（作为字符串），因此长度为返回1而不是3

Answer 2

只需按以下方式为groupNames分配名称

this.setState（{groupNames：names}）;

使用`创建的模板文字将您的数组转换为字符串。

Answer 3

您正在此语句中为新数组分配值。这就是为什么它显示长度1的原因。

this.setState({ groupNames: [`${names}`] });  // It is wrong

应该是这样

this.setState({ groupNames: names });

更新状态列表

3 个答案: