javascript - 如何在 JS 和 React 中填充数组？TypeError：无法设置未定义的属性“组织”

Question

我想用从“displayUserInfo”接收到的数据填充“data”数组。毫不奇怪，下面的代码片段只记录了我输入的最后一行。

populateArray = () => {
    var index= 0;
    let data =  [{
        name: "",
        surname: "",
        age: ""
    }]

    this.state.displayUserInfo.map(currData => {

        data.name = currData.givenName;
        data.surname = currData.givenSurname;
        data.age = currData.givenAge;

        index++;
    });
    console.log(data);
    return data;
}

我想做这样的事情：

data[index].name = currData.givenName;

但这给了我错误： TypeError：无法设置未定义的属性“名称”

如何将输入（对象数组）中的所有数据正确映射到“数据”数组？这种方法正确吗？还有其他方法吗？谢谢