如何从 rails 服务器复制尽可能多的菜单项

Question

我知道我可以像这样使用 MenuItem。

            <FormControl fullWidth>
              <InputLabel>Job area</InputLabel>
              <Select
                autoFocus
                label="job_area"
                sx={{
                  width: "70%",
                }}
                inputProps={{
                  name: "max-width",
                  id: "max-width",
                }}
              >
                <MenuItem value={false as any}>false</MenuItem>
              </Select>
            </FormControl>

如果我想从rails服务器获取数据怎么办？
我尝试搜索它，但我找不到..

手动复制像数据一样糊状的数据是可笑的。
我怎样才能像使用函数一样复制？

谢谢。

加法（已解决）

我试过了：

...
                {props.jobArea.map((jobArea: any) => {
                  <MenuItem value={jobArea.name as string}>
                    {jobArea.name}
                  </MenuItem>;
                })}
              </Select>
            </FormControl>

console.log 是：

{$$typeof: Symbol(react.element), type: {…}, key: null, ref: null, props: {…}, …}
$$typeof: Symbol(react.element)
key: null
props: {value: '関西', children: '関西'} <--- here is jobArea.name
ref: null
type: {$$typeof: Symbol(react.forward_ref), propTypes: {…}, render: ƒ}
_owner: FiberNode {tag: 0, key: null, stateNode: null, elementType: ƒ, type: ƒ, …}
_store: {validated: false}
_self: undefined
_source: {fileName: '/Users/daimetatsuru/staging-at-engineer_rails/frontend/src/components/UsersSearch.tsx', lineNumber: 218, columnNumber: 23}
[[Prototype]]: Object

我觉得很好。
怎么了...

我收到这个错误：

SelectInput.js:423 MUI: You have provided an out-of-range value `undefined` for the select (name="max-width") component.
Consider providing a value that matches one of the available options or ''.
The available values are "".

Answer 1

您似乎在使用 MUI

您的组件需要向某个端点发出请求以获取您的选项

const [options, setOptions] = useState([]);
useEffect(() => {
  async function loadOptions() {
     const response = await fetch('/options');
     const options = await response.json();
     setOptions(options);
  }
  loadOptions(); 
}, [])

然后您可以遍历获取的选项并为您获得的每个选项呈现一个 MenuItem。

<FormControl fullWidth>
 <InputLabel>Job area</InputLabel>
 <Select
    autoFocus
    label="job_area"
    sx={{
      width: "70%",
    }}
    inputProps={{
     name: "max-width",
     id: "max-width",
    }}
  >
  {options.map((option, idx) => (
    <MenuItem 
     key={`option-${idx}`}
     value={option.id}
    >
     {option.label}
    </MenuItem> 
  )}
 </Select>
</FormControl>

如何从 rails 服务器复制尽可能多的菜单项

How can I duplicate menuItems as much as data from rails server

reactjs

material-ui

加法（已解决）