我怎样才能让这个下拉菜单显示所有五十个州而不是“选项#”

如何解决我怎样才能让这个下拉菜单显示所有五十个州而不是“选项#”

现在这段代码显示了一个下拉表单，其中列出了“选项#”。我怎样才能让所有五十个状态都可以选择，而不是选项和数字？

import React,{ useState } from 'react';
    
    import { 
        Box,FormField,grommet,Select,MaskedInput,TextInput 
    } from 'grommet';
    import { grommet } from 'grommet/themes';
    
    const allOptions = Array(50)
      .fill()
      .map((_,i) => `option ${i + 1}`);
    
    export const Simple = () => {
      const [value,setValue] = useState('');
    
      return (
        <grommet theme={grommet}>
          <Box align="center"  background="light-2" >
            <FormField label="State" htmlFor="select" >
              <Select
                id="select"
                placeholder="placeholder"
                options={allOptions}
                value={value}
                onChange={({ option }) => setValue(option)}
              />
            </FormField>
    </Box>
                </grommet>
      );
    };
    export default {
      title: 'Input/FormField/Simple',};

解决方法

如果您的应用需要，请注意使用 Form+FormField 包装器。如果不需要 Form 上下文，请移除 FormField 包装器。

import React,{ useState } from "react";
import { render } from "react-dom";

import { Box,FormField,Grommet,Select } from "grommet";
import { grommet } from "grommet/themes";

// https://gist.github.com/tleen/6299431
const allOptions = [
  "Alabama","Alaska","American Samoa","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of Columbia","Federated States of Micronesia","Florida","Georgia","Guam","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Marshall Islands","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Northern Mariana Islands","Ohio","Oklahoma","Oregon","Palau","Pennsylvania","Puerto Rico","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virgin Island","Virginia","Washington","West Virginia","Wisconsin","Wyoming"
];

export const App = () => {
  const [value,setValue] = useState("");

  return (
    <Grommet theme={grommet}>
      <Box align="center" background="light-2">
        <FormField label="State" htmlFor="select">
          <Select
            id="select"
            placeholder="placeholder"
            options={allOptions}
            value={value}
            onChange={({ option }) => setValue(option)}
          />
        </FormField>
      </Box>
    </Grommet>
  );
};

render(<App />,document.getElementById("root"));