Блог

Я пытаюсь заполнить таблицу различными динамическими строками, однако для некоторых полей вместо строки возвращается идентификатор, для получения которого требуется другой запрос на извлечение. Однако я создал функцию с запросом на выборку, чтобы вернуть строку

 <td>{getDepartmentName(employee.staffId)}</td>
 

возвращает неопределенное, есть идеи, как это исправить? код ниже

 function getDepartmentName(id) {
  
   fetch(`http:/************************/api/hr/Department/${id}`, {
      method: 'GET', 
      headers: new Headers({
        'Authorization': `Bearer ${authToken}`, 
        'Content-Type': 'application/json'
      }),
    })
    .then((res) => {
      res.json().then((data) => {
       return data.name
      });
      })
    .catch((err) => alert(err))

  }
 

 {employees.map((employee) => {
            getDepartmentName(employee.staffId)
            return (
              <tr id={employee.staffId}>
                <td>{employee.firstName}</td>
                <td>{employee.surname}</td>
                <td>{employee.email}</td>
                <td>{employee.addressLine1}<br/>{employee.addressLine2}<br/>{employee.addressLine3}<br/>{employee.postcode}</td>
                <td>{employee.dateOfBirth.substring(0, 10)}</td>
                <td>{getDepartmentName(employee.staffId)}</td>
                <td><Link to= {`/employee-setup/${employee.staffId}`} ><button className="table-btn btn">Edit</button></Link></td>
              </tr>
            )
          })}
 

Весь Код:

 import React, { useState, useEffect } from "react";
import "../../../App.css";
import "./Hr.css";
import { Link } from "react-router-dom";
import { FaKey } from "react-icons/fa";

export default function HumanResources({authToken}) {
  /// fetch data and populate table
  const [employees, setEmployees] = useState([])

  useEffect(() => {
    
    // get employee data
    fetch('http://******/api/hr/Staff', {
      method: 'GET', 
      headers: new Headers({
        'Authorization': `Bearer ${authToken}`, 
        'Content-Type': 'application/json'
      }),
    })
    .then((res) => {
      res.json().then((data) => {
        setEmployees(data)
      });
      
      })
    .catch((err) => alert(err))

  }, [authToken]);

  // get employee data that are ids
  function getDepartmentName(id) {
  
   fetch(`http://******/api/hr/Department/${id}`, {
      method: 'GET', 
      headers: new Headers({
        'Authorization': `Bearer ${authToken}`, 
        'Content-Type': 'application/json'
      }),
    })
    .then((res) => {
      res.json().then((data) => {
       return data.name
      });
      })
    .catch((err) => alert(err))

  }



return (
    <div className="main-container">
      <div className="page-header">
        <h1>Human Resources</h1>
        <div className="status-search-field">
              <div className="form-group">
                <div className="search">
                  <FaKey className="icon" />
                </div>
                <select>
                  <option value="" hidden selected>[Status]</option>
                  <option>Active</option>
                </select>
              </div>
              <div className="form-group">
                <div className="search">
                  <FaKey className="icon" />
                </div>
                <input type="text" placeholder="Search"></input>
              </div>
            </div>
      </div>

      <h2>Employee List</h2>
      <div className="employee-list">
        <label className="bold-label">Department</label>
        <select className="select-dropdown">
          <option value="" defaultValue></option>
          <option>Finance</option>
          <option>Human Resources</option>
          <option>Art</option>
        </select>
      </div>

      <table className="hr-table">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Date Of Birth</th>
            <th>Department</th>
            <th></th>
          </tr>
        </thead>

        <tbody>
          {employees.map((employee) => {
            console.log(employee)
            getDepartmentName(employee.staffId)
            return (
              <tr id={employee.staffId}>
                <td>{employee.firstName}</td>
                <td>{employee.surname}</td>
                <td>{employee.email}</td>
                <td>{employee.addressLine1}<br/>{employee.addressLine2}<br/>{employee.addressLine3}<br/>{employee.postcode}</td>
                <td>{employee.dateOfBirth.substring(0, 10)}</td>
                <td>{getDepartmentName(employee.departmentId)}</td>
                <td><Link to= {`/employee-setup/${employee.staffId}`} ><button className="table-btn btn">Edit</button></Link></td>
              </tr>
            )
          })}
                <div className="add-item">
               <button className="btn add-btn">
                   
                </button>
              </div>
        </tbody>
      </table>
    </div>
  )
}

 

Попробуйте использовать async / await, он будет ждать результата от API, вместо этого возвращая неопределенный

Вы можете попробовать этот вариант

   async  function getDepartmentName(id) {
  
    const data = await fetch(`http://******/api/hr/Department/${id}`,{
      method: 'GET', 
      headers: new Headers({
        'Authorization': `Bearer ${authToken}`, 
        'Content-Type': 'application/json'
      }),
    })
    .then((res) => res.json())
    .catch((err) => alert(err))
     return data.name || ""
  }