javascript - 如何在 select mui 中显示从 api 获取的数据

Question

我正在尝试显示数据，我从选择菜单中的 Api 获取。但似乎有一个问题。我正在获取数据，但它没有显示在选择菜单中。它只是显示为空。但我可以在控制台中获取映射数据。它只是没有显示在选择组件中。 帮我弄清楚。预先感谢:)

这是我的代码

    export function TransferRBTCard(props) {
  const [TransferData, setTransferData] = useState([])
  const [ContactValue, setContactValue] = useState('')

  const handleChange = (event) => {
    setContactValue(event.target.value);
  };

  const TokenData = () => {
    axios.get('http://localhost:8006/api/v2/get/list').then(function (res) {
      try {
        var result = res.data.data;
        console.log(result)
        setTransferData(result)
      }
      catch (error) {
        console.log(error)
      }
    })
  }

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

  const handleSubmit = (evnt,) => {
    evnt.preventDefault();
    axios.post('http://localhost:8006/api/v2/add/transfer')
      .then(response => {
        if (response.data.success === true) {
          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={ContactValue}
                label='Select Contact'
                onChange={handleChange}
              >
                {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"
                onChange={handleChange}
                value={TransferData}
                name="Receiver"
                inputProps={
                  { readOnly: true, }}
                className="form-control"
              />
              <TextField
                id="filled-hidden-label-small" type='number'
                label="Amount" variant="outlined" size="small"
                onChange={handleChange}
                name="Amount"
                className="form-control"
              />
              <TextField
                id="filled-hidden-label-small"
                label="Comments" variant="outlined"
                multiline
                rows={2}
                onChange={handleChange}
                name="Comments"
                className="form-control"
              />
              <Button
                variant="contained"
                type="submit"
                onClick={handleSubmit}
                sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
            </Stack>
          </FormControl>
        </Grid>
      </CardContent>
    </Card>
  );
}

Answer 1

您没有从 map 函数返回(更准确地说，您通过不声明返回来返回 undefined)。

更改此:

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

对此:

{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>
})}