数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 React useEffect 调用加载函数？
我们将使用 React useEffect 钩子来调用我们的加载函数。此钩子允许我们指定一个将在特定组件生命周期事件（例如组件挂载时）运行的函数。通过将我们的加载函数作为依赖项传递，我们确保它将在组件加载或更新时被调用。
React useEffect
useEffect 是 React 中的一个钩子，允许您将组件与外部系统同步。
它在组件渲染后运行，可用于获取数据、更新 DOM 或设置事件监听器。
它接受两个参数：一个包含效果逻辑的函数和一个依赖项列表。
如果需要，效果函数应返回一个清理函数。
useEffect 类似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
方法
您可以通过将其作为钩子第二个参数中的依赖项传递来使用 React 的 useEffect 钩子调用加载函数。加载函数应在 useEffect 的回调函数内部调用。
示例
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
loadData();
}, []); // Pass an empty array to only call the function once on mount.
function loadData() {
// Fetch data or perform other loading logic here
}
// ... component render logic
}
您还可以将变量作为依赖项传递给 loadData 函数，以便当依赖项发生变化时，loadData 函数将再次被调用。
import { useEffect } from 'react';
function MyComponent({id}) {
useEffect(() => {
loadData(id);
}, [id]);
function loadData(id) {
// Fetch data or perform other loading logic here
}
// ... component render logic
}
需要注意的是，为了避免无限循环，由加载函数引起的任何状态更新都应在单独的效果中完成。
最终代码
这是一个使用 useEffect 钩子在 React 组件中加载数据的示例 -
App.js
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
async function fetchData() {
setIsLoading(true);
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const json = await response.json();
setData(json);
} catch (error) {
console.error(error);
} finally {
setIsLoading(false);
}
}
fetchData();
}, []);
if (isLoading) {
return <div style={{ color: 'black' }}>Loading...</div>;
}
if (data) {
return <div style={{ color: 'black' }}>{data.map(item => (<div key={item.id}>
{item.name}
</div>))}</div>;
}
return <div style={{ color: 'black' }}>No data</div>;
}
export default MyComponent;
在此示例中，MyComponent 组件使用 useEffect 钩子在组件首次渲染时从 API 加载数据 -
该钩子接受两个参数：一个在组件渲染时运行的回调函数，以及一个确定何时应运行效果的依赖项数组。
在本例中，我们将一个空数组作为第二个参数传递，这告诉 React 只在组件首次渲染时运行一次效果。
回调函数 fetchData 首先将 isLoading 状态设置为 true，这会导致组件显示“加载中…”消息。
然后它使用 fetch API 从 API 加载数据并等待响应完成。
然后它解析来自响应的 JSON 数据，并使用解析后的数据设置 data 状态。
如果发生错误，它会将错误记录到控制台。最后，它将 isLoading 状态设置为 false，这会导致组件显示加载的数据或“无数据”消息（如果 API 返回空或错误）。
组件根据当前状态渲染不同的消息：“加载中…”（正在获取数据时）、数据本身（数据已加载时）以及“无数据”（如果 API 返回空或错误）。
请注意，此示例使用 async/await 处理 fetch API 返回的 Promise，如果您使用的是旧版本的 javascript，则可以使用 then() 和 .catch() 方法。
输出
14K+ 浏览量
