时间戳

首页 > 解决方案 > React Native：useEffect 内部的 useState 不会更新状态变量

reactjs - React Native：useEffect 内部的 useState 不会更新状态变量

问题描述

好的，所以我觉得我在这里遗漏了一些非常明显的东西，我已经尝试自己解决了几个小时，但无济于事。我正在使用 React Native 创建一个应用程序，并在我的主 App.js 文件中执行此操作（为简洁起见，假设我需要所有必要的内容）-

    const App = () => {
    let [fontsLoaded] = useFonts({
      DoHyeon_400Regular,
    });
    
    const [state, setState] = useState({});

    useEffect(() => {
      async function test(){
        let response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => {
          setState(json)
          console.log(state)
        })
      }
      test()
    }, [])
    return(
      <View>
        // some component(s)
      </View>      
    )
   }

根据我在文档中阅读的内容和我检查过的其他一些 SO 帖子，我不明白为什么这不起作用。React 的版本大于 16.8，所以这不应该是问题。如果我注销 json var，它会显示来自 API 调用的正确响应。

标签： reactjsreact-native

解决方案

state是一个本地常量。它永远不会改变，这不是我们setState想要做的。相反，调用 setState 会告诉 react 重新渲染组件。当该重新渲染发生时，将使用新值创建一个新的局部变量。

所以一切正常，除了你的 console.log 位于它不是特别有用的地方。如果您想查看组件已使用新值重新呈现，请将日志语句移动到组件的主体。

const [state, setState] = useState({});
console.log("rendering with", state);

useEffect(() => {
  async function test(){
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    let json = await response.json();
    setState(json);
  }
  test()
}, [])

推荐阅读