在 React 中跟踪 API 数据答案

【问题标题】：Keep track of API data in React在 React 中跟踪 API 数据
【发布时间】：2021-04-13 05:28:33
【问题描述】：

我正在尝试寻找一种解决方案来进行两次 API 调用并检索我需要的数据。

对于最后一个参数 editedBy 我得到一个长 id 作为字符串，所以我被要求进行第二次 API 调用，在那里我可以找到对应的 id参数。我需要考虑这样一个事实，即使现在该应用程序拥有一个用户，随着时间的推移，这个数字会增加，所以我需要跟踪每个人的数据以及谁进行了编辑。我的问题是我该怎么做？

目前，我尝试了以下代码：

import React, { useEffect, useState } from 'react';
import { getManagerUser } from '/api.js';
import { getUser } from './api.js';

const DisplayDataComponent = () => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [editedBy, setEditedBy] = useState('');

useEffect(() => {
    getManagerUser(managerId).then(res => {
        const managerData = res.data

        getUser(userId).then(res => {
            const userData = res.data

            setFirstName(managerData);
            setLastName(managerData);
            setEditedBy(`${userData.firstName} ${userData.lastName}`);
        })
    })
},[])

return (
    <div>
        <p>{firstName}</p>
        <p>{lastName}</p>
        <p>{editedBy}</p>
    </div>
)}

为了更好地理解，我对 API 信息进行了硬编码：

const manager = [
    {
        id: "2jdd00934hflsp443esd",
        firstName: 'John',
        lastName: 'Smith',
        editedBy: '3hdifu03434kdlfjvds'
    }
]

const user = [
    {
        id: '3hdifu03434kdlfjvds',
        firstName: 'Marry',
        lastName: "James"
    }
]

【问题讨论】：

标签： reactjs api react-hooks state

【解决方案1】：

最好的办法是场景应该由后端处理。后端应该支持一个 API 来提供完整的数据。

【讨论】：