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的依赖项（您可以会收到不掉毛的警告）。 useCallback的依赖项数组为空，将始终返回相同的函数引用，因此您的useEffect将只像现在这样运行一次。

如果将search保留为组件中的常规功能，则引用会更改每个渲染，因此，如果将其作为依赖项包含，则效果将运行每个渲染。

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

为什么我的状态没有得到回应？

1 个答案: