我将 Material-ui 与 React 函数组件一起使用,并使用其自动完成组件。我自定义了它,每当我更改输入字段中的文本时,我希望该组件呈现新的搜索结果。
callAPI("xyz")
我在操作中调用 API 并使用 xyz 参数,从该函数组件调用调度方法。
这里的问题是,当组件进行调用时,它应该等待 API 响应,然后渲染结果,但它得到了一个未解决的承诺,因此渲染失败。
<Paper square>
{callAPI("xyz").results.map(
result => console.log(result);
)}
</Paper>
由于结果是一个未兑现的承诺,因此它将无法映射。
我需要某种方法仅在数据可用时调用地图,或者在数据存在之前显示一些文本,然后在获取数据后进行更改。
任何纠正此代码的建议都会非常有帮助。
EDIT:
function IntegrationDownshift() {
return (
<div>
<Downshift id="downshift-simple">
{({
getInputProps,
getItemProps,
getMenuProps,
highlightedIndex,
inputValue,
isOpen,
selectedItem
}) => (
<div>
{renderInput({
fullWidth: true,
InputProps: getInputProps({
placeholder: "Search users with id"
})
})}
<div {...getMenuProps()}>
{isOpen ?
<Paper square>
{callAPI(inputValue).users.map(
(suggestion, index) =>
renderSuggestion({
suggestion,
index,
itemProps: getItemProps({
item:
suggestion.userName
}),
highlightedIndex,
selectedItem
})
)}
</Paper>
: null}
</div>
</div>
)}
</Downshift>
</div>
);
}