React useState使用错误：无法获取并展示国家列表问题求助

错误原因分析 #

• 常量赋值错误：React状态更新函数setCountries、setFilteredCountries是函数，不能用赋值运算符=调用，必须以函数传参的方式更新状态。
• setCountries未被使用警告：错误的赋值方式导致状态更新函数未被正确调用，修复后警告会自动消失。
• 控制台提示“Not Data Found”：API请求成功但代码报错时会进入catch块打印该信息，修复代码后请求成功就不会触发。

修复后的完整代码 #

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const DonorsTables = () =>{
  const [search, setSearch] = useState("");
  const [countries, setCountries] = useState([]);
  const [filteredcountries, setFilteredCountries] = useState([]);

  // 组件挂载时自动获取国家数据
  useEffect(() => {
    getCountries();
  }, []);

  const getCountries = async () => {
    try {
      const response = await axios.get("https://restcountries.com/v2/all");
      // 正确调用状态更新函数
      setCountries(response.data);
      setFilteredCountries(response.data);
      console.log("数据获取成功");
    } catch (error) {
      console.error("数据获取失败:", error);
      console.log("Not Data Found");
    }
  };

  // 渲染国家列表
  return (
    <div>
      <h2>国家列表</h2>
      <ul>
        {countries.map(country => (
          <li key={country.alpha3Code}>{country.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DonorsTables;

关键修复点说明 #

• 新增useEffect钩子：确保组件挂载时自动执行getCountries方法，否则数据不会主动加载。
• 修正状态更新方式：将setCountries = (response.data)改为setCountries(response.data)，setFilteredCountries同理，符合React状态更新的语法要求。
• 添加列表渲染逻辑：通过map遍历countries状态数组，用每个国家唯一的alpha3Code作为key，渲染国家名称列表。

内容的提问来源于stack exchange，提问作者Salman Ahmed