如何创建具有键值的数组并设置新状态？

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 是否存在于数组中，如果不存在，则“push it”。

但它不起作用。它返回一个像这样的无限数组：

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

没有键的数组：/

Answer 1

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

不是一个有效的数组结构，正如其他 cmets 所说，你应该使用对象数组

[ 
   { 
      "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 我需要看看。