在tbody标记中，您不会从map函数返回任何东西。您需要添加return关键字或使用圆括号来 Package JSX。还要传递一个空数组作为第二个参数，以便只运行useEffect一次。

import { useEffect, useState } from 'react';
import './App.css';

function Countries() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('https://restcountries.com/v3.1/all?fields=name,continents,population,flag')
      .then((resp) => resp.json())
      .then((apiData) => {
        setData(apiData);
      });
  }, []); // empty array here
  return (
    <div className="app-container">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Continent</th>
            <th>Population</th>
            <th>Flag</th>
          </tr>
        </thead>
        <tbody>
          {data.map((country) => (
            <tr>
              <td>{country.name}</td>
              <td>{country.continents}</td>
              <td>{country.population}</td>
              <td>{country.flag}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Countries;

您没有返回render tr元素，因为您将它们放在了大括号中，而不是圆括号中。另外，name是一个对象，您应该使用country.name.common，而country.continents是一个数组，您应该将其连接到一个字符串，或者迭代这些项：

{data.map(country => (
    <tr key={country.flag}>
      <td>{country.name.common}</td>
      <td>{country.continents.join(', ')}</td>
      <td>{country.population}</td>
      <td>{country.flag}</td>
    </tr>
  ))}

另外，useEffect没有dependencies数组，这意味着它会在每次状态改变时运行（比如设置状态），这会导致另一个API调用，设置状态会导致无限循环，设置一个空数组[]作为useEffect的依赖项可以防止这种情况。

示例：

x一个一个一个一个x一个一个二个x