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

Question

下面的代码返回"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>

我尝试执行以下操作：

<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>

但是当我这样做时，我会收到一条警告，说我的道具类型无效，列表中没有任何内容。

我想假设我错过了一个允许承诺在通过之前解决的步骤，但我不确定确切地把它放在哪里。

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

Answer 1

我更喜欢在回调中设置状态grabIDsPromise.then

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>

--编辑

您能否详细说明为什么我应该将状态设置为外部 下载菜单而不是内部？也是我解决这个问题的尝试之一 是：。。。法典。。。这种方法背后的原因是什么 错了？

这并没有错。UseEffect回调函数返回值应该是可以清理资源的函数(也许您正在组件之间切换并且请求可以中止(

const[options, setOptionsData] = React.useState([]);
useEffect(() => {
(async () => {
setOptionsData(await grabIDs());
})()

return () => {
// you can refactor `grabIDs` and store AbortController somewhere
// const controller = new AbortController();
// const signal = controller.signal;
// fetch(url, {signal}).then(...
// and then call here
// controller.abort();
}
}, [])