为什么我的状态没有充满响应？

Question

console.log(data) 为我提供了一个包含正确数据的对象，但是，我为该数据设置了速率，但是当控制台记录速率时，我得到一个空对象 {}。提前致谢。

const [rates, setRates] = useState({});

  useEffect(() => {

    search();

  }, []);

  const search = async () => {

    const response = await axios.get('https://api.exchangeratesapi.io/latest');

    const data = response.data.rates;

    console.log(data);

    setRates(data);

    console.log(rates);

  };

Answer 1

正如有人在评论中所说，状态更新将反映在下一次渲染中。此外，我将解决您的代码中的一些问题。  const [rates, setRates] = useState({});  useEffect(() => {      // move this in here unless you plan to call it elsewhere      const search = async () => {          const response = await axios.get('https://api.exchangeratesapi.io/latest');          const data = response.data.rates;          setRates(data);       };    search();  }, [/* no dependencies means it runs once */]);如果您确实计划在其他地方调用search，请将其包装在一个useCallback钩子中，以便您可以将其设置为您的依赖项useEffect（如果没有，您将收到一个 lint 警告）。useCallback使用空的依赖数组将始终返回相同的函数引用，因此您useEffect将只运行一次，就像现在一样。如果您search作为组件中的普通函数离开，则引用会更改每个 render，因此如果您将其作为依赖项包含在内，您的效果将在每次渲染时运行。 const [rates, setRates] = useState({});   const searchCallback = useCallback(async () => {      const response = await axios.get('https://api.exchangeratesapi.io/latest');      const data = response.data.rates;      setRates(data);  }, []) useEffect(() => {      // move this in here unless you plan to call it elsewhere          search(); }, [searchCallback]);