材料 UI 选择组件不工作 - "Error: choices.map is not a function"

Question

我正在努力使用一个选择组件来下拉(巴西)的州列表，我可以在应用程序中的几个形式中使用(客户，供应商等)。因此，我单独创建了一个Select组件，我想使用这个&;select&;组件，以选择银行所在的州(位置)。我在地图函数中得到一个错误，在选择组件，而且，表格银行崩溃了，我不知道如何在银行表格中正确使用数组的选择。进口什么?银行内部表格如何办理?我将感谢收到的所有帮助． 我使用Material-ui 5.0和React 18.0和Linux Ubunto 20.04。

// Bank form 
// Select is at 3/4 down bellow
import { Container } from '@mui/material';
import { Typography } from '@mui/material';
import { Box } from '@mui/material';
import { TextField } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { Button } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import Grid from '@mui/material/Grid';
import choices from '../components/Select';
import Controls from '../components/Controls';
const initialValues = {
id: 0,
fullName: '',
address: '',
local: '',
city: '',
CEP: '',
phone: '',
contact: '',
email: '',
numBank: '',
branch: '',
account: '',
balance: '',
date: '',
stateId: '',
}

const useStyles = makeStyles((theme) => {
return{
root: {
'& .MuiFormControl-root': {
margim: theme.spacing(1) 
},
display: "flex",
flexwrap: "wrap",


},
textField: {
margimLeft: theme.spacing(1),
margimRight: theme.spacing(1),
width: "25ch",
},

field: {
spacing: 2,
display: "block",
}
}
});
export default function Bancos(){
const classes = useStyles()
const [name, setName] = useState('');
const [address, setAddress] = useState('');
const [nameError, setNameError] = useState(false);
const [addressError, setAddressError] = useState(false);
const [numBank, setNumBank] = useState('');
const [branch, setBranch] = useState('');
const [account, setAccount] = useState('');
const [numBankError, setNumBankError] = useState(false);
const [branchError, setBranchError] = useState(false);
const [accountError, setAccountError] = useState(false);
const [values, setValues] = useState(initialValues); 

const handleSubmit = (e) => {
e.preventDefault()
setNameError(false)
setAddressError(false)
if(name == ''){
setNameError(true)
}
if( address == ''){
setAddressError(true)
}
if ( numBank == ''){
setNumBankError(true)
}
if (branch == ''){
setBranchError(true)
}
if (account == ''){
setAccountError(true)
}
}
const handleInputChange = (e) => {
const { name, value } = e.target
setValues({
...values,
[name]: value
})
}
return(

<Container>
<Typography  variant="h6" color="textSecondary" align="center" gutterBottom
className="titleBank">
Cadastro de Bancos
</Typography>
<form noValidate autoComplete="off" onSubmit={handleSubmit}>
<Grid container spacing={2}>
<Box mt={3} mb={1}> {/* colocar margim top e bottom com box   */}
<Grid item xs={6} md={6}>
<TextField label="Nome do Banco" variant="outlined" color="secondary"
sx={{width: "430px", ml: 2}} required className={classes.field} name="fullName"
value={values.fullName} error={ nameError }
onChange={ handleInputChange }/>

</Grid></Box>

<Box mt={1}>
<Grid item xs={6} md={10} style={{ display: "flex" }}>
<TextField label="Endereço" variant="outlined" color="secondary"
sx={{width: "650px", mr: 1, ml: 2}} required className={classes.field} name="address"
value={values.address}
onChange={handleInputChange} error={addressError}/>
<TextField label="Bairro"  className={classes.textField} name="local"
sx={{width: "350px" }}  value={ values.local }
onChange={ handleInputChange }  />
</Grid></Box>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<TextField label="Cidade"  className={classes.field} name="city"
sx={{width: "320px", mr: 1 }}  value={values.city}
onChange={ handleInputChange } />
<TextField label="CEP"  className={classes.field} name="CEP"
sx={{width: "180px", mr: 1}} value={ values.CEP } 
onChange={ handleInputChange }/> 

<TextField label="Contato" className={classes.field} name="contact"
sx={{width: "350px", mr: 1 }} value={ values.contact} 
onChange={ handleInputChange } />
</Grid>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<TextField label="Telefone"  className={classes.field} name="phone"
sx={{width: "235px", mr: 1 }} value={ values.phone }
onChange={ handleInputChange } />
<TextField label="Celular"  className={classes.field} name="phone"
sx={{width: "235px", mr: 1 }} value={ values.phone }
onChange={ handleInputChange } />
<TextField label="E-mail"  className={classes.field} name="email"
sx={{width: "350px", mr: 1 }} value={values.email} 
onChange={ handleInputChange } />

</Grid><br/>

<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<**Controls.Select**  sx={{width: "150px", mr: 2 }}
name="state"
label="Estado"
value={values.stateId}
onChange={handleInputChange}
options=**{choices}**
/>    
<TextField label="Nº do Banco" className={classes.field} required
sx={{width: "100px", mr: 1 }} name="numBank" value={values.numBank}
onChange={ handleInputChange } error={ numBankError } />   
<TextField label="Nº Agência" className={classes.field} name="branch"
sx={{width: "150px", mr: 1 }} value={ values.branch } required
onChange={ handleInputChange } error={ branchError } />
<TextField label="Nº Conta Corrente" className={classes.field} name="account"
sx={{width: "250px", mr: 1 }}  value={ values.account } required 
onChange={ handleInputChange } error={ accountError } />
<TextField label="Saldo R$"  className={classes.field} name="balance"
sx={{width: "180px", mr: 1 }} value={ values.balance } 
onChange={ handleInputChange } />
</Grid><br/>
<Grid item xs={6} md={8} style={{ display: "flex" }}> 
<Box mt={4}> {/* colocar margim top e bottom com box   */}
<Button type="submit" variant="contained" color="primary"
endIcon={<KeyboardArrowRightIcon />} 
>
Salvar
</Button>
</Box>
</Grid>
</Grid>            
</form>
</Container>

)
}

import React from 'react'
import {FormControl, InputLabel, Select as MuiSelect,  MenuItem }  from '@mui/material';
// Select component with all states
export default function Select(props) {
const choices = () => ([
{ id: '1', title: 'Acre'}, 
{ id: '2', title: 'Alagoas'},
{ id: '3', title: 'Amazonas' },
{ id: '4', title: 'Amapá'   }, 
{ id: '5', title: 'Bahia'  }, 
{ id: '6', title: 'Distrito Federal'}, 
{ id: '7', title: 'Espírito Santo' }, 
{ id: '8', title: 'Mato Grosso do Sul'}, 
{ id: '9', title: 'Mato Grosso'}, 
{ id: '10', title: 'Rio de Janeiro'}, 
{ id: '11', title:  'São Paulo' }, 
{ id: '12', title: 'Minas Gerais'}, 
{ id: '13', title: 'Paraná'  }, 
{ id: '14', title: 'Santa Catarina'}, 
{ id: '15', title:  'Sergipe' }, 
{ id: '16', title: 'Paraíba' }, 
{ id: '17', title: 'Pernambuco'}, 
{ id: '18', title:  'Goiás'  }, 
{ id: '19', title: 'Roraima'}, 
{ id: '20', title: 'Rondônia'}, 
{ id: '21', title: 'Santa Catarina'}, 
{ id: '22', title: 'Rio Grande do Sul'}, 
{ id: '23', title: 'Rio Grande do Norte'},
{ id: '24', title: 'Maranhão'}


]);

const { name, label, value, onChange } = props; 
console.log(choices);
return (
<FormControl  variant="outlined">
<InputLabel>{label}</InputLabel>
<MuiSelect label={label} name={name} value={value} onChange={onChange}>
<MenuItem value="">none</MenuItem>
{
choices.map(
item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
)
}
</MuiSelect>
</FormControl>

)
}
// Uncaught TypeError: choices.map is not a function  at Select (Select.js:46:1)
// The above error occurred in the <Select> component

Answer 1

TL;DR;

更改代码:

{
choices.map(
item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
)
}

{
choices()?.map(
item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
)
}

为什么我的代码不工作?

您已经将choices定义为函数而不是变量。所以你需要调用它来获取值

或者，您可以通过如下定义该变量来纠正错误:

const choices = [
{ id: '1', title: 'Acre'},
// .... other items
]

Answer 2

在您的组件中，choices是一个返回选项数组的函数。

Answer 3

use choices()。用Map代替choices.map.