如何使用键值创建数组并设置新状态？

Question

我有一个values 。 这是一个空数组。

在 componentDidMount 上，我从 API 获取值，此操作使用如下数组设置新状态：

 [
   435235324: { data: ... },
   456565767: { data: ... }
 ]

每个数字都是一个 id。

我在每个 id 中有用于新数据的 websocket，所以我需要更新数组项的数据值。

我的搜索功能是：

const setNewValueToState = (id, data) => {
    const exist = widgetValues[id];
    console.log(exist)
    if(!exist){
      setWidgetValues(oldValues => [...oldValues, oldValues.id = data ])
    }
  } 

我需要检查 id 是否存在于数组中，如果不存在，则“推送它”。

但它不起作用。 它返回一个无限数组，如下所示：

[
 { data: ... },
 { data: ... }
]

没有键的数组：/

Answer 1

 [
   435235324: { data: ... },
   456565767: { data: ... }
 ]

不是有效的数组结构，正如其他人的评论所说，您应该使用对象数组

[ 
   { 
      "id":123456,
      "data":{ 
         ....
      }
   },
   { 
      "id":1234567,
      "data":{ 
         ....
      }
   },
]

或者使用一个对象

{
     123:{
         data:{}
     },
     1234:{
         data:{}
     },

}

Answer 2

假设您的状态如下所示：

[{id: '123', data: ...}]

这不是有效的数据结构：

[123: {data ...}]

 let data = [{ id: 993, data: 'foo' }, { id: 123, data: 'bar' }]; let idToSearch = 123; for (let i = 0; i < data.length; i++) { if (data[i].id = idToSearch) { // found it, it's data[i] console.log('Found:', data[i]); break; // exit the loop! } }

或者我倾向于避免的新热门东西，因为我通常使用非常大的数据集并且每ms计数（为每个索引调用回调）。 但在大多数环境中使用小型或中型阵列完全没问题：

const found = data.find(item => item.id === idToSearch);

Answer 3

同意@Drusto 的回答。 数组结构不正确。 它应该是

var oldObj = {
    435235324: {},
   456565767: {}
};

最后你可以做

var newObj = {...oldObj, 435235324:{yourKey: "yourVal"}}

还有你的setWidgetValues我需要看看。