无法在异步方法中设置 useState 变量并控制台记录它

Posted 2023-02-16

【中文标题】无法在异步方法中设置 useState 变量并控制台记录它

【英文标题】：Unable to set useState variable in async method and console log it

【发布时间】：2022-01-22 18:52:58

【问题描述】：

我正在和我的朋友一起开发一个应用程序项目，当我们尝试设置使用状态并且控制台记录变量时，我们多次发现问题，我在网站上寻找解决方案，发现原因是usestate 是一个异步 awiat，这意味着我在使用状态中设置的变量并未立即设置在其中，因此我尝试了许多在网站上找到的解决方案，但它们都不适合我。 在屏幕截图中，您可以看到 json 变量之前在控制台日志中，而 set 变量在 setActiveUser 之后没有显示，有什么帮助吗？

谢谢！

【参考方案1】：

如果你想在设置状态时做一些事情，那么最好的办法是使用 React 中的 useEffect 钩子并将你的状态添加到依赖数组中。这将在每次状态更改时调用您的 useEffect 中的函数。下面是一个粗略的例子：

import  Text  from 'react-native';

const MyComponent = () => 
  const [activeUser, setActiveUser] = useState(null);

  useEffect(() => 
    // This should log every time activeUser changes
    console.log( activeUser );
  , [activeUser]);

  const fetchAuthentication = async user => 
    var flag = false;
    await fetch('/api/authUser/', 
      method: 'PUT',
      headers:  'Content-Type': 'application/json' ,
      body: JSON.stringify(user),
    )
      .then(res => 
        res.ok && (flag = true);
        return res.json();
      )
      .then(json => 
        if (flag) 
          setActiveUser(json);
        
      )
      .catch(error => console.error(error));
    return flag;
  ;

  return <Text>Hi</Text>;
;

完整文档：https://reactjs.org/docs/hooks-effect.html