React Hooks数组中如何获取对象值？React Select回显异常求助

我仔细看了你的代码，核心问题出在React Select的value属性设置错误，另外状态更新逻辑也可以做些优化，下面一步步帮你解决：

1. 修正React Select的value属性 #

你现在把value写成了箭头函数：

value={() => ssTestVal(s._id)}

但React Select的value需要直接接收匹配options格式的数组，而非返回数组的函数。直接调用ssTestVal(s._id)就能拿到对应选中值的数组，所以改成：

value={ssTestVal(s._id)}

2. 优化状态更新逻辑（可选但推荐） #

你当前用indexOf找元素再替换的方式没问题，但用map函数生成新数组会更简洁，也更符合React的不可变更新原则，避免潜在的引用问题：

const setSelectedSpecificationValuesHandler = (e, s) => {
  const objForWrite = {
    _id: s._id,
    name: s.name,
    values: e,
  };
  // 用map替换原数组中匹配的元素，无匹配则追加新元素
  const updatedArr = selectedSpecificationValues.some(item => item._id === s._id)
    ? selectedSpecificationValues.map(item => item._id === s._id ? objForWrite : item)
    : [...selectedSpecificationValues, objForWrite];
  setSelectedSpecificationValues(updatedArr);
};

3. 简化ssTestVal函数逻辑 #

你的ssTestVal函数逻辑是对的，但可以用可选链+默认值简化判断，让代码更清晰：

const ssTestVal = (Id) => {
  const foundItem = selectedSpecificationValues.find(i => i._id === Id);
  return foundItem?.values || [];
};

修复后的完整渲染代码 #

{specifications && specifications.map((s, idx) => (
  <Select
    key={s._id} // 新增唯一key，满足React列表渲染要求，避免警告
    classNamePrefix='select2-selection'
    options={s.values}
    value={ssTestVal(s._id)}
    onChange={(e) => setSelectedSpecificationValuesHandler(e, s)}
    isMulti
  />
))}

做完这些修改后，你的多选下拉框就能正确回显选中值了。

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