React+Styled-Components电商站select组件报错修复请求

问题根源是你直接给<option>设置了selected属性，React要求在<select>上通过value（受控组件）或defaultValue（非受控组件）控制选中状态，同时要实现第一个提示选项禁用不可选，按以下方式修改代码：

修复后的完整代码 #

const FilterSize = styled.select`
  margin-left: 10px;
  padding: 5px;
  cursor: pointer;
  outline: 0px;
  font-size: inherit;
`;
const FilterSizeOption = styled.option``;

// 确保size状态初始值设为空字符串
// const [size, setSize] = useState('');

//...

<Filter>
    <FilterTitle>Size</FilterTitle>
    {/* 用value绑定size状态，替代option上的selected */}
    <FilterSize value={size} onChange={(e) => setSize(e.target.value)}>
         {/* 提示选项：禁用+空value，无需设置selected */}
         <FilterSizeOption disabled value="">
              Choose a size:
         </FilterSizeOption>
         {product?.product?.size.map((s) => (
              <FilterSizeOption key={s} value={s}>
                   {s}
              </FilterSizeOption>
         ))}
    </FilterSize>
</Filter>

关键修改说明 #

• 移除option的selected属性：将选中状态的控制权交给<select>的value属性，绑定你的size状态变量，符合React受控组件规范，直接消除控制台报错。
• 配置提示选项：给第一个提示选项添加disabled（禁用不可选）和value=""（空字符串），确保初始状态下该选项默认显示且无法被选中。
• 状态初始化：确保size状态的初始值为空字符串''，自动匹配第一个value为空的选项，实现默认显示提示文本的效果。

如果是非受控组件场景（无需维护size状态），可将<FilterSize>的value={size}替换为defaultValue=""，同样能达到需求且无需维护状态变量。

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