解决MUI Select组件无法展示API获取数据的问题

核心问题：Select选项未渲染 #

你的TransferData.map回调使用大括号但未返回MenuItem组件，导致映射后没有生成任何可渲染元素，因此Select显示为空。

修复步骤： #

1. 修正map的返回逻辑
   将map中的大括号改为小括号（隐式返回），或者显式添加return语句：

   {TransferData.map((data) => (
     <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
   ))}
   

   或者：

   {TransferData.map((data) => {
     return <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
   })}
   

2. 修复useEffect语法错误
   你的useEffect结尾多了一个冗余的]，修正后：

   useEffect(() => {
     TokenData()
   }, [])
   

3. 其他关键优化

   • 统一表单状态管理：当前handleChange仅更新ContactValue，但多个TextField也绑定了该函数，需根据event.target.name区分更新对应字段：

     const [formData, setFormData] = useState({
       contact: '',
       receiver: '',
       amount: '',
       comments: ''
     })
     const handleChange = (event) => {
       const { name, value } = event.target;
       setFormData(prev => ({ ...prev, [name]: value }));
       // 选择联系人后同步更新Receiver字段
       if (name === 'contact') {
         const selected = TransferData.find(item => item.id === value);
         setFormData(prev => ({ ...prev, receiver: selected?.name || '' }));
       }
     };
     

   • 修正Receiver的TextField值：当前value={TransferData}是错误的，需绑定选中联系人的名称，如上代码所示。
   • 完善请求错误捕获：原TokenData的try/catch仅处理响应解析错误，需把axios请求失败的逻辑也纳入捕获：

     const TokenData = () => {
       axios.get('http://localhost:8006/api/v2/get/list')
         .then(res => {
           setTransferData(res.data.data);
         })
         .catch(error => {
           console.log('请求失败:', error);
         })
     }
     

修复后完整核心代码片段 #

export function TransferRBTCard(props) {
  const [TransferData, setTransferData] = useState([])
  const [formData, setFormData] = useState({
    contact: '',
    receiver: '',
    amount: '',
    comments: ''
  })

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    
    if (name === 'contact') {
      const selectedContact = TransferData.find(item => item.id === value);
      setFormData(prev => ({ ...prev, receiver: selectedContact?.name || '' }));
    }
  };

  const TokenData = () => {
    axios.get('http://localhost:8006/api/v2/get/list')
      .then(res => setTransferData(res.data.data))
      .catch(error => console.log('请求失败:', error))
  }

  useEffect(() => {
    TokenData()
  }, [])

  const handleSubmit = (evnt) => {
    evnt.preventDefault();
    axios.post('http://localhost:8006/api/v2/add/transfer', formData)
      .then(response => {
        if (response.data.success) alert(response.data.message);
      })
      .catch(error => console.log('提交失败:', error.message));
  }

  return (
    <Card {...props}>
      <CardContent>
        <Stack direction="row" alignItems="center" gap={1}>
          <ShareOutlinedIcon sx={{ color: "text.secondary" }} />
          <Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
            Transfer RBT
          </Typography>
        </Stack>
        <Grid>
          <FormControl size="small" fullWidth>
            <Stack flexDirection='column' gap={1.5} mt={1}>
              <InputLabel id="Contact Select" sx={{ mt: 1 }}>Select Contact</InputLabel>
              <Select
                labelId="Contact Select"
                id="demo-simple-select"
                value={formData.contact}
                label='Select Contact'
                onChange={handleChange}
                name="contact"
              >
                {TransferData.map((data) => (
                  <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
                ))}
              </Select>
              <TextField
                id="filled-hidden-label-small"
                label="Receiver" variant="outlined" size="small"
                value={formData.receiver}
                name="Receiver"
                inputProps={{ readOnly: true }}
                className="form-control"
              />
              <TextField
                id="filled-hidden-label-small" type='number'
                label="Amount" variant="outlined" size="small"
                onChange={handleChange}
                value={formData.amount}
                name="Amount"
                className="form-control"
              />
              <TextField
                id="filled-hidden-label-small"
                label="Comments" variant="outlined"
                multiline
                rows={2}
                onChange={handleChange}
                value={formData.comments}
                name="Comments"
                className="form-control"
              />
              <Button
                variant="contained"
                type="submit"
                onClick={handleSubmit}
                sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
            </Stack>
          </FormControl>
        </Grid>
      </CardContent>
    </Card>
  );
}

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