ReactJS使用State设置Select值返回undefined问题求助

我看了你的代码逻辑，核心问题出在State的结构和Select Option的value结构完全不对应，导致find方法找不到匹配项，自然无法选中默认值。

具体问题拆解： #

1. State初始值结构错误
   你当前的初始State是：

   const [selected, setSelected] = useState([{ Weigth: "250gr" }]);
   

   但你的Option的value是这样定义的：

   <option value={{ name: attribute.name, value: option }}>
     {option}
   </option>
   

   每个Option的value是一个包含name和value字段的对象，而你的State里存的是{ Weigth: "250gr" }——既没有name字段，键名还拼写错误（Weigth少了一个h，应该是Weight），这直接导致selected.find((o) => o.name === attribute.name)返回undefined。

2. onChange的更新逻辑不对
   你当前的onChange只是把选中的字符串存进去，没有保持和Option value一致的结构，后续渲染自然也匹配不上。

修复步骤： #

1. 修正State初始值结构

把初始State改成和Option value一致的格式：

const [selected, setSelected] = useState([{ name: "Weight", value: "250gr" }]);

这样find方法就能通过name字段匹配到对应的项了。

2. 重写onChange处理函数

要保证选中后更新的State结构和Option value一致，同时支持更新已存在的项或者新增项：

const handleAttributeChange = (attribute, selectedOption) => {
  setSelected(prevSelected => {
    // 先找是否已经有该属性的选中项
    const existingIndex = prevSelected.findIndex(item => item.name === attribute.name);
    if (existingIndex !== -1) {
      // 替换已有的项
      const updated = [...prevSelected];
      updated[existingIndex] = selectedOption;
      return updated;
    } else {
      // 新增项
      return [...prevSelected, selectedOption];
    }
  });
};

3. 调整Select的value和onChange绑定

确保Select的value正确匹配，onChange传递正确的参数：

<select
  key={attribute.name}
  value={selected.find(item => item.name === attribute.name) || ""}
  onChange={(e) => {
    // e.target.value就是Option的value对象
    handleAttributeChange(attribute, e.target.value);
  }}
>
  {/* Option部分保持不变 */}
  {attribute.options.map((option) => (
    <option key={option} value={{ name: attribute.name, value: option }}>
      {option}
    </option>
  ))}
</select>

额外提示： #

• 注意对象的引用相等性：React判断Select选中状态时，会严格比较value的引用。如果你的Option value是每次渲染都新建的对象（比如{ name: attribute.name, value: option }），可能会导致每次渲染都认为value变了，建议把这些对象提前缓存或者用更稳定的标识（比如用字符串作为value，比如${attribute.name}-${option}，然后在State里存对应的字符串，这样匹配更简单）。比如：

  // Option用字符串value
  <option key={option} value={`${attribute.name}-${option}`}>
    {option}
  </option>
  
  // State存字符串数组
  const [selected, setSelected] = useState(["Weight-250gr"]);
  
  // Select的value和onChange
  <select
    value={selected.find(item => item.startsWith(attribute.name)) || ""}
    onChange={(e) => {
      const newValue = e.target.value;
      setSelected(prev => {
        const existing = prev.find(item => item.startsWith(attribute.name));
        if (existing) {
          return prev.map(item => item.startsWith(attribute.name) ? newValue : item);
        } else {
          return [...prev, newValue];
        }
      });
    }}
  >
  

  这种方式可以避免对象引用带来的问题，实现起来更简单。

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