javascript - 在异步调用完成后渲染 React 函数组件的一部分
问题描述
我正在使用带有 React 功能组件的 material-ui 并使用它的 Autocomplete 组件。我对其进行了自定义,每当我更改输入字段中的文本时,我希望该组件能够呈现新的搜索结果。
callAPI("xyz")
我在操作中调用 API 并使用 xyz 参数,从这个函数组件调用调度方法。
这里的问题是,当组件进行调用时,它应该等待 API 响应然后渲染结果,但是它得到了一个未解决的 promise,所以它渲染失败。
<Paper square>
{callAPI("xyz").results.map(
result => console.log(result);
)}
</Paper>
由于结果是一个未解决的承诺,它将无法映射。我需要一些方法来仅在数据可用时调用地图,或者在数据存在之前显示一些文本,然后在获取数据后更改。
任何纠正此代码的建议都将非常有帮助。
编辑:
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>
);
}
解决方案
React 16.8 引入了Hooks:
Hooks 是让你从函数组件中“钩入”React 状态和生命周期特性的函数。
因此useState()
,您可以使用空数组声明状态变量,并在useEffect()
从 API 获得响应时调用您的 API 以填充状态:
function App() {
const [data, setData] = useState([]);
useEffect(() => {
callAPI("xyz").then(result => {
setData(result);
})
}, []);
if(!data.length) return (<span>loading...</span>);
return (
<Paper square>
{data.map(
result => console.log(result);
)}
</Paper>
);
}
更多关于钩子的信息:https ://reactjs.org/docs/hooks-intro.html 。
推荐阅读
- java - JAVA - 这些之间有什么区别?
- tomcat - Tomcat 上的战争部署,出现错误 java.lang.ClassNotFoundException: grails.async.web.AsyncGrailsWebRequest
- python - 如何在 Python 中格式化对 Blogger API 的获取请求?
- python - 应用于 Serie 的 max 函数
- java - 用户侧网络消费
- laravel - 有谁熟悉 Laravel mix.webpackConfig 吗?安装 vuetify 后出现问题
- python - 匹配python正则表达式中示例(例如)的所有变体
- sbt - build.sbt 中的“跳过测试”有什么作用?
- node.js - Docker Container 中的 NodeJS fs.watch 检测到两次更改
- inheritance - 扩展类中的系统verilog变量