将新属性添加到现有的对象数组中

Question

我在我的React应用程序中使用formik，并具有以下初始值，这只是其中的一部分：

"myInfo": [
            {
                "myId": 0,
                "myName": "Name A",
                "defaultVal": 2
            },
            {
                "myId": 1,
                "myName": "Name B",
                "defaultVal": 4
            }
]

我试图做的是尝试在此数组中添加新属性，但运气不多。

我的代码如下：

const getAdditionalData = async (id, idx) => {
  try {
    const response = await fetch(`http://localhost:3000/more-data/${id}`);
    const myData = await response.json();

    myInfo[idx].vals = myData;
  } catch (err) {
    console.error(err.message);
  }
};        

useEffect(() => {
  myInfo.map((info, index) => {
    getAdditionalData(info.myId, index)
  });
}, []); 

fyi，返回mydata中的值是另一个看起来像这样的对象的数组：

myid = 0，它返回：

[{id: 1, name: 'AA'}
 {id: 2, name: 'BB'}]

wher code> myid < /code> = 1它返回：

[{id: 3, name: 'CC'}
 {id: 4, name: 'DD'}
 {id: 5, name: 'EE'}]

我试图做的是在数组循环中，我想在myInfo array中添加一个新属性。我尝试了以下内容，但无效：

myInfo [idx] .vals = mydata;

我追求的最终结果如下：

"myInfo": [
            {
                "myId": 0,
                "myName": "Name A",
                "defaultVal": 2,
                "vals": [
                   {id: 1, name: 'AA'},
                   {id: 2, name: 'BB'}
                ]
            },
            {
                "myId": 1,
                "myName": "Name B",
                "defaultVal": 4,
                "vals": [
                   {id: 3, name: 'CC'},
                   {id: 4, name: 'DD'},
                   {id: 5, name: 'EE'}
                ]
            }
]

您会看到vals的新属性已添加。

任何帮助都将不确定我缺少什么。

Answer 1

什么是myInfo？状态，班级或参考变量？还要考虑到MAP返回一个全新的数组，因此不会突变。

您可以尝试此操作，应该在mynewinfo中查看更新的阵列：

useEffect(() => {
  const myNewInfo = myInfo.map((info, index) => ({
    ...info,
    vals: getAdditionalData(info.myId, index)
  }));
}, []);

Answer 2

以下是本机JavaScript中我从我这里奏效的内容：

const getAdditionalData = async () => {
  try {
    const response = await fetch(`http://localhost:5500/data.json`);
    const myData = await response.json();
    let newObj = [];
    myData.myInfo.map((data, i) => {
      newObj = [...newObj, { ...data, val: [...valObj[i]] }];
    });
    console.dir(newObj);
  } catch (err) {
    console.error(err.message);
  }
};

const valObj = [
  [
    { id: 1, name: "AA" },
    { id: 2, name: "BB" },
  ],
  [
    { id: 3, name: "CC" },
    { id: 4, name: "DD" },
    { id: 5, name: "EE" },
  ],
];

getAdditionalData();


//data.json

{
  "myInfo": [
    {
      "myId": 0,
      "myName": "Name A",
      "defaultVal": 2
    },
    {
      "myId": 1,
      "myName": "Name B",
      "defaultVal": 4
    }
  ]
}

请注意，您需要同步myInfo和valobj的索引。

Answer 3

看来您正在尝试使用像对象这样的JSON字符串。他们必须是

请参阅以下示例。

const myInfo = `[
  {
    "myId": 0,
    "myName": "Name A",
    "defaultVal": 2
  },
  {
    "myId": 1,
    "myName": "Name B",
    "defaultVal": 4
  }
]`;

const myData = `[
  {"id": 3, "name": "CC"},
  {"id": 4, "name": "DD"},
  {"id": 5, "name": "EE"}
]`;

const parsedInfo = JSON.parse(myInfo);
const parsedData = JSON.parse(myData);

parsedInfo[0].vals = parsedData;

console.log(parsedInfo[0]);