React中选择货币未触发getHistory()更新图表状态及API 404报错问题

看起来你碰到了两个关联的问题：API请求404错误导致拿不到新数据，以及Graph组件始终展示旧数据。咱们一步步拆解解决：

1. 先搞定API 404错误（核心根源） #

404意味着请求的资源不存在，这是历史数据没更新的主要原因之一，先从这里入手：

• 核对请求URL的准确性：检查getHistory()里的API路径和参数是否符合后端要求：
  • 货币参数格式对不对？比如后端需要小写的usd但你传了大写的USD？
  • 接口路径有没有写错？比如后端实际是/api/currency-history，你写成了/api/history？
  • 参数传递方式是否正确？比如后端要求用查询参数?currency=USD，你却拼到了路径里/api/history/USD？
• 验证请求方法：确认你用的GET/POST是后端支持的，有些接口只接受特定请求方式。
• 手动测试API：直接在浏览器地址栏或Postman里调用接口（带上正确货币参数），看能不能返回正常数据。如果还是404，那就是后端接口的问题，得和后端同学确认或修正路径。

给你个修正后的getHistory()示例参考：

async function getHistory(selectedCurrency) {
  try {
    // 假设正确的API路径是带查询参数，且需要小写货币代码
    const response = await fetch(`/api/history?currency=${selectedCurrency.toLowerCase()}`);
    // 务必检查响应状态，避免默默失败
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status} ${response.statusText}`);
    }
    const newHistoryData = await response.json();
    // 更新历史数据状态
    setHistoryData(newHistoryData);
  } catch (err) {
    console.error('Failed to get history', err);
  }
}

2. 确保状态更新能触发Graph组件重渲染 #

就算API请求成功了，要是状态更新没触发组件渲染，还是会显示旧数据，做这些检查：

• 确认状态更新逻辑正确：在getHistory()拿到数据后，是否调用了正确的状态更新函数？加个日志验证：

  const [historyData, setHistoryData] = useState([]);
  
  async function getHistory(selectedCurrency) {
    // ... 请求逻辑
    const newHistoryData = await response.json();
    console.log('新获取的历史数据:', newHistoryData);
    setHistoryData(newHistoryData);
  }
  
  // 监听状态变化，确认是否更新成功
  useEffect(() => {
    console.log('HistoryData状态已更新:', historyData);
  }, [historyData]);
  

  如果日志里能看到新数据，说明状态更新没问题；看不到的话，还是API请求的锅。
• 检查Graph组件的props传递：确认Graph组件正确接收historyData作为props，并且用这个props渲染图表：

  // 父组件传递props
  <Graph historyData={historyData} />
  
  // Graph组件内部使用props
  const Graph = ({ historyData }) => {
    // 必须用传入的historyData生成图表数据，而非组件内部静态数据
    const chartData = processHistoryData(historyData);
    return <Chart data={chartData} />;
  };
  

• 处理引用类型状态更新：如果historyData是对象/数组，更新时要创建新引用，不能直接修改原对象。比如用setHistoryData([...historyData, newItem])而非historyData.push(newItem)，这样React才能检测到状态变化。
• 修正memoization逻辑：如果Graph组件用了React.memo，要确保props比较逻辑正确。比如historyData是数组时，默认浅比较可能认为前后props没变化，这时候需要自定义比较函数：

  export default React.memo(Graph, (prevProps, nextProps) => {
    // 深比较历史数据，内容变化时触发重渲染
    return JSON.stringify(prevProps.historyData) === JSON.stringify(nextProps.historyData);
  });
  

3. 确认getHistory()的调用时机正确 #

最后检查用户选择货币时，是否正确调用了getHistory()并传递了正确的货币值：

<select 
  value={selectedCurrency}
  onChange={(e) => {
    setSelectedCurrency(e.target.value);
    // 确保这里调用了getHistory，且参数正确
    getHistory(e.target.value);
  }}
>
  <option value="USD">美元</option>
  <option value="EUR">欧元</option>
</select>

确认e.target.value是后端API接受的格式（比如大小写、代码长度等）。

先解决404的问题，再排查状态更新和组件渲染的问题，应该就能搞定啦！

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