面试题：React 数据获取中 useEffect 依赖数组的复杂场景处理

思路

确定依赖项：useEffect 依赖数组应包含所有会影响数据获取逻辑的状态。在这个场景下，用户登录状态和用户偏好设置会影响 API 的数据获取，所以它们应包含在依赖数组中。当这些状态变化时，才会触发数据获取逻辑。
数据获取：在 useEffect 回调函数中进行 API 调用。使用异步操作来获取数据，例如使用 fetch 或者 axios。
状态更新：根据获取的数据结果更新不同的状态。

代码框架

import React, { useState, useEffect } from'react';
import axios from 'axios';

const MyComponent = () => {
    // 假设这里定义用户登录状态和用户偏好设置状态
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [userPreferences, setUserPreferences] = useState({});
    // 定义用于存储获取数据的状态
    const [fetchedData, setFetchedData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                // 根据登录状态和用户偏好设置来决定 API 的请求地址或参数
                let apiUrl = `/api/data?loggedIn=${isLoggedIn}`;
                if (Object.keys(userPreferences).length > 0) {
                    // 假设根据用户偏好设置添加参数
                    apiUrl += `&preference=${JSON.stringify(userPreferences)}`;
                }
                const response = await axios.get(apiUrl);
                setFetchedData(response.data);
                // 这里可以根据获取的数据结果更新其他状态，假设更新一个名为dataProcessed的状态
                setDataProcessed(true);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        if (isLoggedIn) {
            fetchData();
        }
    }, [isLoggedIn, userPreferences]);

    return (
        <div>
            {/* 组件渲染逻辑 */}
        </div>
    );
};

export default MyComponent;

在上述代码中，useEffect 的依赖数组包含 isLoggedIn 和 userPreferences，确保仅当这两个状态变化时才触发数据获取。当 isLoggedIn 为 true 时，执行 fetchData 函数进行数据获取，并根据结果更新 fetchedData 以及其他相关状态。

星途面试题库

面试题：React 数据获取中 useEffect 依赖数组的复杂场景处理

知识考点

面试题答案

思路

代码框架