Question

好，所以我觉得我只是在这里遗漏了一些非常明显的东西，而我一直在尝试自己动手几个小时，但无济于事。我正在用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调用的正确响应。

Answer 1

state是本地常量。它永远不会改变，这不是setState试图做的。而是，调用setState告诉做出反应以重新呈现组件。重新渲染时，将使用新值创建一个新的局部变量。

所以一切正常，除了console.log并不是特别有用。如果要查看组件是否已使用新值重新渲染，请将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()
}, [])

Answer 2

setState不同步。如果立即记录状态，则不会注意到更新。另外，如果您使用await关键字，则不必再使用then。

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

2 个答案: