React状态中如何不用对象数组存储历史值，改用单个对象存储键值对

你需要把状态存储结构从对象数组调整为单对象键值对结构，按以下两步修改即可：

• 修改状态初始值：把useState的初始值从空数组[]改为空对象{}，建议替换any类型为更准确的TS类型：

// 原初始值为[]，修改为{}
const [activityTypes, setActivityTypes] = useState<Record<string, string>>({});

• 修改状态更新逻辑：不再通过展开数组追加新对象，改为展开旧对象追加新的键值对：

.then((response) => {
  setActivityTypes((oldObj) => ({
    ...oldObj,
    [item.channelSettingTypeId]: response.settingValue
  }));
});

修改后最终生成的状态结构完全匹配预期：{ActFollow: 'BlN', ActSendGift: 'BlY', ActSubscribe: 'BlY'}

如果你需要把已有的旧数组格式数据批量转换为目标对象结构，可以直接用下面的转换方法：

const oldArray = [{ActFollow: 'BlN'},{ActSendGift: 'BlY'},{ActSubscribe: 'BlY'}];
const targetObj = oldArray.reduce((result, cur) => {
  const key = Object.keys(cur)[0];
  result[key] = cur[key];
  return result;
}, {} as Record<string, string>);

内容的提问来源于stack exchange，提问作者Fathe