当我尝试复制 <MenuItem /> 时，地图方法不起作用

Question

我正在使用 material ui。

我尽量复制 <MenuItem /> 和数据一样多。
所以我写了这段代码：

            <FormControl fullWidth>
              <InputLabel>JobArea</InputLabel>
              <Select
                autoFocus
                label="JobArea"
                sx={{
                  width: "70%",
                }}
              >
                {props.jobArea.map((jobArea: any) => {
                  <MenuItem key={jobArea.id} value={(jobArea || {}).name || ""}>
                    {(jobArea || {}).name || ""}
                  </MenuItem>;
                })}
              </Select>
            </FormControl>

但是代码没有任何反应。

似乎 <MenuItem> 没有在节目中阅读。
当我这样使用 console.log 时

                {props.jobArea.map((jobArea: any) => {
                  {
                    console.log((jobArea || {}).name || "");
                  }
                  <MenuItem key={jobArea.id} value={(jobArea || {}).name || ""}>
                    {(jobArea || {}).name || ""}
                  </MenuItem>;
                })}

结果是：

所以我猜 map 方法没问题，但问题是 <MenuItem>。
从 Github 他们像我一样使用 map 方法。

https://github.com/mui/material-ui/issues/18494#issuecomment-680500105

我的代码和其他代码之间的区别是什么。
请帮我。
谢谢。

Answer 1

你传递给 map 的 lambda 有一个语句体，因为它被大括号括起来了。您需要 return 菜单项或使用不带花括号的表达式 lambda。

当我尝试复制 <MenuItem /> 时，地图方法不起作用

Map method doesn't work When I try duplicating <MenuItem />

reactjs

material-ui