Данные реакции не отображаются

Question

Я пытаюсь отобразить эти данные, которые хранятся в списке countries, однако это приводит к тому, что я ничего не получаю в своей таблице. Скорее всего, проблема вызвана тем, что таблица перерисовывается неправильно, я попытался использовать useEffect в строке 14, чтобы распечатать длину списка, и я получил правильный результат. Любая подсказка будет оценена!

import React, { useState, useEffect } from "react";
import getData from "../Hooks/getData";
import Table from "react-bootstrap/Table";

const Lists = () => {
  const [countries, setCountries] = useState([]);

  if (countries.length === 0) {
    getData().then((data) => {
      setCountries(data.data.Countries);
    });
  }

  useEffect(() => {
    console.log(countries.length);
  });

  const getInfo = () => {
    countries.map((country) => {
      return (
        <tr>
          <td>{country.Country}</td>
          <td>{country.NewConfirmed}</td>
          <td>{country.TotalConfirmed}</td>
        </tr>
      );
    });
  };

  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>Country Name</th>
          <th>New Confirmed</th>
          <th>Total Confirmed</th>
        </tr>
      </thead>
      <tbody>{getInfo()}</tbody>
    </Table>
  );
};

export default Lists;

Answer 1

Ваш getInfo ничего не возвращает.

Либо используйте неявный возврат, не используя {} вокруг тела функции, либо явно используйте оператор return

 const getInfo = () => countries.map((country) => {
      return (
        <tr>
          <td>{country.Country}</td>
          <td>{country.NewConfirmed}</td>
          <td>{country.TotalConfirmed}</td>
        </tr>
      );
    });

или

  const getInfo = () => {
    return countries.map((country) => {
      return (
        <tr>
          <td>{country.Country}</td>
          <td>{country.NewConfirmed}</td>
          <td>{country.TotalConfirmed}</td>
        </tr>
      );
    });
  };