React按钮首次点击后console.log无值，二次点击才正常的问题求助

问题原因 #

• React中useState的更新函数是异步批量执行的：调用setRate后，不会立即更新rate的状态值，而是将更新任务加入队列，等待当前事件循环结束后才会完成状态更新并触发组件重新渲染。
• fetch是异步网络请求，当你在calculate函数末尾调用console.log(rate)时，不仅setRate还没完成状态更新，甚至fetch的回调可能都还没执行，此时打印的是组件当前的rate初始值（空字符串）。第二次点击时，上一次的状态更新已经完成，所以打印的是上一次请求到的正确汇率值。

解决方案 #

方案1：在fetch回调中直接处理最新数据 #

既然在fetch的回调里已经拿到了最新的汇率数据，直接在这里打印或处理，不需要依赖还未更新的rate状态：

const calculate = () => {
  fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${from}.json`)
  .then(response => response.json())
  .then(data => {
    // 先拿到最新汇率值
    const currentRate = data[from]?.[to];
    if (currentRate) {
      setRate(currentRate);
      console.log(currentRate); // 直接打印最新值
    } else {
      console.error('输入的货币代码无效');
      setRate('');
    }
  })
  .catch(error => console.error('请求失败:', error));
}

方案2：用useEffect监听rate状态变化 #

如果需要在rate状态更新后执行后续逻辑（比如打印、计算），可以使用useEffect钩子监听rate的变化：

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

function App() {
  const [from, setFrom] = useState('')
  const [to, setTo] = useState('')
  const [rate, setRate] = useState('')

  // 监听rate变化，状态更新后执行逻辑
  useEffect(() => {
    if (rate) {
      console.log(rate);
      // 这里可以添加rate更新后的其他业务逻辑
    }
  }, [rate]);

  const calculate = () => {
    fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${from}.json`)
    .then(response => response.json())
    .then(data => {
      setRate(data[from]?.[to] || '');
    })
    .catch(error => console.error('请求失败:', error));
  }

  return (
    <div className="App">
      <div className="container">
      <input type="text" className="from" onChange={(e) => (setFrom(e.target.value))} />
      <input type="text" className="to" onChange={(e) => (setTo(e.target.value))} />
      <button onClick={() => calculate()}>calculate</button>
      </div>
    </div>
  );
}

方案3：用async/await简化异步代码 #

将calculate改为异步函数，用await处理fetch，让异步逻辑更直观：

const calculate = async () => {
  try {
    const response = await fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${from}.json`);
    const data = await response.json();
    const currentRate = data[from]?.[to];
    if (currentRate) {
      setRate(currentRate);
      console.log(currentRate);
    } else {
      console.error('输入的货币代码无效');
      setRate('');
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
}

额外注意事项 #

• 要添加错误捕获逻辑，避免网络请求失败或货币代码无效导致页面报错。
• 使用可选链操作符?.可以避免data[from]或data[from][to]不存在时抛出错误。

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