React项目中实现点击国家获取并展示对应节假日的方法

以下是实现点击国家获取并展示对应节假日的完整代码及关键修改说明：

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

const App = () => {
  const [countries, setCountries] = useState([]);
  // 存储选中国家的节假日数据
  const [selectedHolidays, setSelectedHolidays] = useState([]);
  // 记录当前选中的国家代码，用于控制展示逻辑
  const [selectedCountryCode, setSelectedCountryCode] = useState(null);
  // 加载状态，优化用户交互体验
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    axios
      .get('https://date.nager.at/api/v3/AvailableCountries')
      .then((response) => {
        setCountries(response.data);
      })
      .catch(error => console.log(`Axios error: ${error}`));
  }, []);

  // 动态获取指定国家的节假日
  const fetchHolidays = async (countryCode) => {
    setIsLoading(true);
    try {
      const response = await axios.get(`https://date.nager.at/api/v3/NextPublicHolidays/${countryCode}`);
      setSelectedHolidays(response.data);
      setSelectedCountryCode(countryCode);
    } catch (error) {
      console.log(`获取节假日失败: ${error}`);
      setSelectedHolidays([]);
    } finally {
      setIsLoading(false);
    }
  };

  // 原代码中filteredCountries未定义，此处用countries替代，若有过滤逻辑可自行替换
  const displayedCountries = countries;

  return (
    <div className='content'>
      <div>
        {displayedCountries.map((item, index) => (
          <div key={index}>
            {/* 点击时传递当前国家的code */}
            <li 
              style={{ cursor: 'pointer' }}
              onClick={() => fetchHolidays(item.countryCode)}
            >
              {item.name}
            </li>
            {/* 仅在当前国家被选中时展示节假日 */}
            {selectedCountryCode === item.countryCode && (
              <div style={{ marginLeft: '20px', marginTop: '8px' }}>
                {isLoading ? (
                  <p>加载中...</p>
                ) : selectedHolidays.length > 0 ? (
                  <ul>
                    {selectedHolidays.map((holiday, idx) => (
                      <li key={idx}>
                        <strong>{holiday.date}</strong>: {holiday.name}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p>暂无节假日数据</p>
                )}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

关键修改说明 #

• 新增状态管理：

  • selectedHolidays：存储选中国家的节假日数据
  • selectedCountryCode：标记当前点击的国家，控制该国家下方的节假日展示
  • isLoading：处理请求加载状态，避免重复点击并提升用户体验

• 优化请求函数：

  • 让fetchHolidays接收countryCode参数，动态拼接请求URL，适配不同国家
  • 增加try/catch捕获请求错误，防止程序崩溃
  • 用finally确保加载状态无论成功失败都会重置

• 交互与展示逻辑：

  • 通过箭头函数传递当前国家的countryCode给点击事件，确保请求对应数据
  • 给可点击的<li>添加指针样式，明确交互提示
  • 实现三种状态展示：加载中、有节假日数据、无数据，覆盖所有场景

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