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

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]);