为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

LEATH 2023-01-06 15:41:28

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

  };


查看完整描述

1 回答

?
翻阅古今

TA贡献1513条经验 获得超5个赞

正如有人在评论中所说,状态更新将反映在下一次渲染中。此外,我将解决您的代码中的一些问题。


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


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 13 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信