MUI - 选择不带初始值会引发警告和错误

Question

我试图使用控制的react MUISelect元素，其中包含一些选项，但初始值必须为空(no初始值-空选择(。这听起来是很常见的行为。我不希望在默认情况下选择其中一个选项。

根据我所读到的，如果值是字符串，则应该使用''而不是未定义的值作为默认值。然而，在我的情况下，选项是对象，所以唯一的方法是将其设置为undefined或null。

这里有一个例子的链接。注意第一次渲染时的警告：

You have provided an out-of-range value undefined for the select component.

以及选择其中一个选项时的错误：

A component is changing the uncontrolled value state of Select to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Select element for the lifetime of the component. The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.

Codesandbox示例

你知道该怎么做吗？

Answer 1

如果你想把选项的值作为一个对象，你可以这样做。我必须承认，这看起来不是很花哨。

function App() {
const [item, setItem] = React.useState("");
return (
<Select
value={item?.type ? JSON.stringify(item.type) : ""}
displayEmpty
onChange={(event) => {
console.log(`changed: ${JSON.stringify(event.target.value)}`);
setItem({ ...item, type: JSON.parse(event.target.value) });
}}
>
{types?.map((type) => (
<MenuItem value={JSON.stringify(type)} key={type.id}>
{type?.name ? type.name : ""}
</MenuItem>
)) ?? []}
</Select>
);
}

我建议将该值保留为每个对象的id属性。这将是一种方法：

function App() {
const [item, setItem] = React.useState('');
return (
<Select
value={item}
displayEmpty
onChange={(e) => {
setItem(e.target.value);
}}
>
{types?.map((type) => (
<MenuItem value={type.id} key={type.id}>{type.name ?? ""}</MenuItem>
)) ?? []}
</Select>
);
}

您并不真正需要renderValue道具。此外，请记住，您应该为每个选项添加一个密钥。