<select>应该有 {defaultValue} 或 {value} 而不是设置 {selected}

Question

我正在使用带有样式组件的 reactjs 构建一个电子商务网站。 我的页面product.jsx的<select>元素具有不同尺寸的产品[XS,S,M,L,XL] ，导致错误总是在 console.dev 中呈现时显示此错误：

警告：使用defaultValue或value道具 on 而不是设置selected on 。

我之前在下面尝试过这段代码，但它没有按预期工作。 我希望将第一个元素显示为禁用，根本不应该选择：

<Filter>
  <FilterTitle>Size</FilterTitle>
    <FilterSize onChange={(e) => setSize(e.target.value)}>
        {product.size?.map((s) => (
              <FilterSizeOption key={s}>{s}</FilterSizeOption>
        ))}
  </FilterSize>
</Filter>

---

请帮我修复下面的代码而不是上面的代码。

product.jsx代码：

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

//...

<Filter>
    <FilterTitle>Size</FilterTitle>
    <FilterSize onChange={(e) => setSize(e.target.value)}>
         <FilterSizeOption selected={true} disabled="disabled">
              Choose a size:
         </FilterSizeOption>
         {product?.product?.size.map((s) => (
              <FilterSizeOption key={s} value={s}>
                   {s}
              </FilterSizeOption>
         ))}
    </FilterSize>
</Filter>

Answer 1

要解决此错误，您需要更改value="default"而不是selected={true} ，并且在FilterSize组件上应添加defaultValue="default" 。 defaultValue与value 值相同，你将绑定默认选择。 您可以自己重命名的默认值。

前

后

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

const sizes = ['XS', 'S', 'M', 'L', 'XL'];

function App() {
  const [size, setSize] = useState();

  return (
    <>
      <FilterSize defaultValue="default" onChange={e => setSize(e.target.value)}>
        <FilterSizeOption value="default" disabled="disabled">
          Choose a size:
        </FilterSizeOption>
        {sizes.map(s => (
          <FilterSizeOption key={s} value={s}>
            {s}
          </FilterSizeOption>
        ))}
      </FilterSize>
    </>
  );
}

export default App;