来自两个 API 端点 ReactJS 的数据显示在表格上

Question

我已经提到了下面的代码，请帮我解决这个问题。

我有三列公司名称地址和用户 Compnay Name Address 来自一个 API 端点，从第一个数据中提取 user_id 并将其发送到另一个端点并获取用户的信息，即用户名，并将其显示在 users 列下的同一张表上。

import React, {useState, useEffect} from 'react'
import SideDrawer from '../components/SideDrawer/SideDrawer'
import Table from '../components/table/Table';
import './Companies.scss';
import Filter from '../components/FIlter/Filter';
import Freeze from '../icons/Freeze.svg'
import Button from '../components/button/Button';
import exportIcon from '../icons/export.svg';

const dropDownData = [
    {itemName: "Setting", link:'#'},
    {itemName: "Close", link:'#'},
]
function Companies() {
    const [datas, setDatas] = useState([])
    const [user, setUser] = useState([])
    const [userID, setUserID] = useState('')
    const [username, setUserName] = useState('')
    const authToken = process.env.AUTH_TOKEN
    console.log(authToken)
    useEffect(() => {
        fetch("",{
            method: "GET",
            headers:{
                authorization: "Bearer <TOKEN>"
            }
        })
          .then(res => res.json())
          .then(tableData => {
            setDatas(tableData);
            console.log(tableData)
            tableData.map(data=>data.users.map(data => (fetchUserData(data.user_id))))
          })
      }, [userID])
    //   console.log(userID)
    function fetchUserData(userID) {
        // console.log(userID)
        fetch(`https://api/accounts/users/getUser?user_id=${userID}`,{
                method: "GET",
                headers:{
                    authorization: "Bearer <TOKEN>"
                }
            })
            .then(res=> res.json())
            .then(users => {
                // console.log(users.username)
                setUserName(users.username)
            })
    }
      function renderBody() {
          console.log(datas.users)
        return (
          <tbody>
              {datas.map(data => (
                <tr>
                    <td key={data.company_name}>{data.company_name}</td>
                    <td key={data._id}>{data.address}</td>
                    <td key={username}>{username}</td>
                </tr>
              ))}
          </tbody>
        );
      }    
    return (
        <div className="companies">
            <SideDrawer activeLink={'/companies'}/>
            <div className="companies__content">
            <h1>Companies</h1>
            <div className="companies__menu">
                <div className="companies__menu_left">
                    <Filter data={dropDownData}/>
                </div>
                
                <div className="companies__menu_right">
                    <Button buttonLabel="Export" type="textButton" icon={exportIcon}/>
                    <Button buttonLabel="Freeze" type="textButton" icon={Freeze}/>
                </div>
            </div>
            <div className="companies_table">
                        <table>
                            
                            <tr>
                                <th>Company Name</th>
                                <th>Address</th>
                                <th>Users</th>
                            </tr>
                            {renderBody()}
                        </table>
                        </div>
            
            </div>
            
        </div>
    )
}

export default Companies

Answer 1

只需合并 fetchUserData 上的字段：

从您的 tableData 映射中传递 DataIndex，然后更新该记录。

Answer 2

试试这个

import React, { useState, useEffect } from 'react'
import SideDrawer from '../components/SideDrawer/SideDrawer'
import Table from '../components/table/Table';
import './Companies.scss';
import Filter from '../components/FIlter/Filter';
import Freeze from '../icons/Freeze.svg'
import Button from '../components/button/Button';
import exportIcon from '../icons/export.svg';

const dropDownData = [
    { itemName: "Setting", link: '#' },
    { itemName: "Close", link: '#' },
]
function Companies() {
    const [datas, setDatas] = useState([])
    const [user, setUser] = useState([])
    const [userID, setUserID] = useState('')
    const [usernames, setUserNames] = useState({})
    const authToken = process.env.AUTH_TOKEN
    console.log(authToken)
    useEffect(() => {
        getOrg();
    }, [userID])
    //   console.log(userID)

    const getOrg = () => {
        let users = {};
        return fetch("https://example.com/accounts/getOrg", {
            method: "GET",
            headers: {
                authorization: "Bearer <TOKEN>"
            }
        })
            .then(res => res.json())
            .then(tableData => {
                setDatas(tableData);
                console.log(tableData)
                tableData.fpr(data => data.users.map(({ user_id }) => {
                    users[user_id] = true; // remove duplicate call
                }))
                Object.keys(users).map(fetchUserData); // Can use Promise.all
            })
    }
    const fetchUserData = async (userID) => {
        const users = await fetch(`https://example.com/accounts/users/getUser?user_id=${userID}`, {
            method: "GET",
            headers: {
                authorization: "Bearer <TOKEN>"
            }
        }).then(res => res.json());

        setUserNames({
            ...usernames,
            userID: users
        })
    }
    function renderBody() {
        console.log(datas.users)
        return (
            <tbody>
                {datas.map(data => (
                    <tr>
                        <td key={data.company_name}>{data.company_name}</td>
                        <td key={data._id}>{data.address}</td>
                        <td key={usernames[data.user_id]}>{usernames[data.user_id]}</td> //get print whatever is required
                    </tr>
                ))}
            </tbody>
        );
    }
    return (
        <div className="companies">
            <SideDrawer activeLink={'/companies'} />
            <div className="companies__content">
                <h1>Companies</h1>
                <div className="companies__menu">
                    <div className="companies__menu_left">
                        <Filter data={dropDownData} />
                    </div>

                    <div className="companies__menu_right">
                        <Button buttonLabel="Export" type="textButton" icon={exportIcon} />
                        <Button buttonLabel="Freeze" type="textButton" icon={Freeze} />
                    </div>
                </div>
                <div className="companies_table">
                    <table>

                        <tr>
                            <th>Company Name</th>
                            <th>Address</th>
                            <th>Users</th>
                        </tr>
                        {renderBody()}
                    </table>
                </div>

            </div>

        </div>
    )
}

export default Companies