如何使用set.State将新元素添加到类数组对象的首位？

你可以通过函数式更新拿到最新的原有状态值，提取原有data的所有值后在头部插入新元素，再重新生成对应结构的对象即可，实现代码如下：

// 类组件写法
this.setState(prevState => {
  // 按数字键升序提取原有所有值
  const originalValues = Object.values(prevState.data);
  // 头部插入新元素
  const newValues = ['name4', ...originalValues];
  // 生成符合要求的新data对象
  const newData = Object.fromEntries(
    newValues.map((value, index) => [String(index), value])
  );
  return { data: newData };
});

如果使用函数组件的useState，逻辑完全一致：

const [data, setData] = useState({
  "0": "name1",
  "1": "name2",
  "2": "name3"
});

// 调用该方法即可传入要插入的头部值
const addItemToHead = (newItem) => {
  setData(prev => {
    const originalValues = Object.values(prev);
    const newValues = [newItem, ...originalValues];
    return Object.fromEntries(
      newValues.map((val, idx) => [String(idx), val])
    );
  })
}

// 示例调用
addItemToHead('name4');

优化建议 #

如果你使用这个data结构是为了渲染列表，更建议直接将data存储为数组类型，插入头部的操作会更简洁，无需做格式转换：

// 数组结构下的插入逻辑
this.setState(prev => ({
  data: ['name4', ...prev.data]
}))

内容的提问来源于stack exchange，提问作者younes.xd