Reactjs 当在数组之前返回承诺对象时，如何修复映射类型错误？

下面的代码返回“TypeError:options.map不是一个函数”，我假设它正在发生，因为它不是一个数组，而是一个promise对象，如标题中所述。代码如下：

function DownloadMenus() { 
   async function grabIDs(){

     const response = await fetch("http://localhost:5000/obviusmetersID");
     const jsonData = await response.json();
     let ids = [];

     for(var i = 0; i< jsonData.length; i++){
         var obj = jsonData[i];
         ids.push(obj.id);
     }

     return ids;

    }

    const[options, setOptionsData] = React.useState(grabIDs);
    const [selectedIndex, setSelectedIndex] = React.useState(0);

    const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setOpen(false);
    };
...
...

    return(
...
...
    <ClickAwayListener onClickAway={handleClose}>
                                    <MenuList id="split-button-menu">
                                        {options.map((option, index) => (
                                            <MenuItem
                                                key={option}
                                                disabled={index === 2}
                                                selected={index === selectedIndex}
                                                onClick={(event) => handleMenuItemClick(event, index)}
                                            >
                                                hi
                                                {option}
                                            </MenuItem>
                                        ))}
                                    </MenuList>
    </ClickAwayListener>

函数下载菜单（）{
异步函数grabIDs（）{
const response=等待获取（“http://localhost:5000/obviusmetersID");
const jsonData=await response.json（）；
设ids=[]；
对于（var i=0；i{
设置选定的索引（索引）；
setOpen（假）；
};
...
...
返回(
...
...
{options.map（（选项，索引）=>(
handleMenuItemClick（事件、索引）}
>
你好
{option}
))}

我试着做到以下几点：

                                <MenuList id="split-button-menu">
                                    {async () => {await options.map((option, index) => (
                                        <MenuItem
                                            key={option}
                                            disabled={index === 2}
                                            selected={index === selectedIndex}
                                            onClick={(event) => handleMenuItemClick(event, index)}
                                        >
                                            hi
                                            {option}
                                        </MenuItem>
                                    ))}}
                                </MenuList>

{async（）=>{await options.map（（选项，索引）=>(
handleMenuItemClick（事件、索引）}
>
你好
{option}
))}}

但是当我这样做的时候，我会得到一个警告，说我有一个无效的prop类型，列表中没有显示任何内容

我想假设我错过了一个步骤，允许承诺在通过之前得到解决，但我不确定具体放在哪里

---

我可以根据需要编辑代码块，但我认为这些都是相关的部分。

我更喜欢在

grabIDs

Promise中设置状态。然后

回调

 async function grabIDs() {

     const response = await fetch("http://localhost:5000/obviusmetersID");
     const jsonData = await response.json();
     const ids = jsonData.map(pr => pr.id);
     return ids;

}

function DownloadMenus() { 
    const[options, setOptionsData] = React.useState([]);

    useEffect(() => {
      grabIDs().then(data => {
        setOptionsData(data)
      })
    }, [])

    return <ClickAwayListener onClickAway={handleClose}>
      <MenuList id="split-button-menu">
        {options.map((option, index) => (
           <MenuItem
             key={option}
             disabled={index === 2}
             selected={index === selectedIndex}
             onClick={(event) => handleMenuItemClick(event, index)}>hi{option}
           </MenuItem>
       ))}
     </MenuList>
  </ClickAwayListener>

---

React想要

ReactNode

s而不是

Promise

。你不能那样叫它

async

。你需要做得更高，然后通过

setState

。谢谢！你能详细说明一下为什么我应该在下载菜单之外而不是在里面设置状态吗？我解决这个问题的一个尝试是：useEffect（async（）=>{const[options，setOptionsData]=React.useState（grabIDs（）；}）此方法错误的原因是什么？更新的答案。再次感谢您花时间解释。