英文:
The map function in TextField does not work if it is located in the component material-ui
问题
The map function in TextField does not work if it is located in the component material-ui
I have two TextFields in the first one the radio button works, in the second one the radio button does not work. How to do if the map function is located in a separate component to use the radio button?
if you try to replace the value in the first example, it will change correctly, in the second example it does not work. The only difference is that in the second example map is a separate file
https://codesandbox.io/s/green-snow-bmbcn2?file=/src/Test.js
import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import MapCastom from "./MapCastom";
const currencies = [
{
value: "USD",
label: "$"
},
{
value: "EUR",
label: "€"
},
{
value: "BTC",
label: "฿"
},
{
value: "JPY",
label: "¥"
}
];
export default function SelectTextFields() {
return (
<Box
component="form"
sx={{
"& .MuiTextField-root": { m: 1, width: "25ch" }
}}
noValidate
autoComplete="off"
>
<div>
<TextField
id="outlined-select-currency"
select
label="Select"
defaultValue="EUR"
helperText="Please select your currency"
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div>
<TextField
id="outlined-select-currency"
select
label="Select"
defaultValue="EUR"
helperText="Please select your currency"
>
<MapCastom data={currencies} />
</TextField>
</div>
</Box>
);
}
import React from "react";
import MenuItem from "@mui/material/MenuItem";
const MapCastom = ({ data }) => {
return (
<>
{data.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</>
);
};
export default MapCastom;
<details>
<summary>英文:</summary>
The map function in TextField does not work if it is located in the component material-ui
I have two TextFields in the first one the radio button works, in the second one the radio button does not work. How to do if the map function is located in a separate component to use the radio button?
if you try to replace the value in the first example, it will change correctly, in the second example it does not work. The only difference is that in the second example map is a separate file
https://codesandbox.io/s/green-snow-bmbcn2?file=/src/Test.js
[![enter image description here][1]][1]
import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import MapCastom from "./MapCastom";
const currencies = [
{
value: "USD",
label: "$"
},
{
value: "EUR",
label: "€"
},
{
value: "BTC",
label: "฿"
},
{
value: "JPY",
label: "¥"
}
];
export default function SelectTextFields() {
return (
<Box
component="form"
sx={{
"& .MuiTextField-root": { m: 1, width: "25ch" }
}}
noValidate
autoComplete="off"
>
<div>
<TextField
id="outlined-select-currency"
select
label="Select"
defaultValue="EUR"
helperText="Please select your currency"
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div>
<TextField
id="outlined-select-currency"
select
label="Select"
defaultValue="EUR"
helperText="Please select your currency"
>
<MapCastom data={currencies} />
</TextField>
</div>
</Box>
);
}
import React from "react";
import MenuItem from "@mui/material/MenuItem";
const MapCastom = ({ data }) => {
return (
<>
{data.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</>
);
};
export default MapCastom;
[1]: https://i.stack.imgur.com/6FL7R.jpg
</details>
# 答案1
**得分**: 2
在这里，您很可能遇到了警告：
>MUI: 您提供了一个超出范围的
这意味着在首次渲染时，选择的值不在可能的选项之中。
修复这个问题的一种方法是不要使用一个组件，你已经需要的是一个数组，所以你可以用这个函数替换`MapCastom`：
```js
const MapCastom = (data) => {
return data.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
));
};
然后这样调用它：
<TextField
id="outlined-select-currency"
select
label="Select"
defaultValue="EUR"
helperText="Please select your currency"
>
{MapCastom(currencies)}
</TextField>;
英文:
Here most likely you are encountering the warning
>MUI: You have provided an out-of-range
which means that during first rendering select value doesn't see possible options.
One way to fix it is to not use a component for this, already what you need is an array so you can replace MapCastom with this function :
const MapCastom = (data) => {
return data.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
));
};
and call it this way :
<TextField
id="outlined-select-currency"
select
label="Select"
defaultValue="EUR"
helperText="Please select your currency"
>
{MapCastom(currencies)}
</TextField>;
答案2
得分: 1
似乎要使 MenuItem 正常工作，它必须是 Select 的直接子元素。一个解决方法是使用一个函数来返回 MenuItems 而不是一个组件。 Github 问题
英文:
It seems that for the MenuItem to work, it has to be a direct descendent of Select. One workaround is to use a function to return MenuItems instead of a component. Github issue
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论