在React中使用返回语句中的fetch result,可以通过以下步骤实现:
下面是一个示例代码:
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
setLoading(false);
} catch (error) {
console.error('Error:', error);
}
};
fetchData();
}, []);
return (
<div>
{loading ? (
<p>Loading...</p>
) : (
<p>{data}</p>
)}
</div>
);
};
export default MyComponent;
在上述示例中,我们定义了一个名为MyComponent的函数组件。在组件的状态中,使用useState定义了data和loading两个变量,分别用于存储请求结果和加载状态。
在组件的渲染方法中,使用条件渲染来根据loading状态显示不同的内容。如果loading为true,显示"Loading...";否则,显示请求结果data。
在组件的副作用钩子函数useEffect中,定义了一个异步函数fetchData,用于发送fetch请求并获取结果。在fetchData函数中,使用await关键字等待fetch请求的响应结果,并将结果解析为JSON格式。然后,使用setData方法将解析后的结果存储在data变量中,并使用setLoading方法将loading状态设置为false,表示加载完成。
最后,通过调用fetchData函数来触发异步操作,并使用空数组作为useEffect的第二个参数,表示只在组件挂载时执行一次。
这样,当组件渲染时,会先显示"Loading...",然后在fetch请求完成后,显示请求结果data。
领取专属 10元无门槛券
手把手带您无忧上云