为什么 useState 设置在 useEffect 中不起作用？我该如何解决这个问题？

Question

所以这是我的问题：

import sanityClient from '@sanity/client';

export const client = sanityClient({
  projectId: import.meta.env.VITE_APP_SANITY_PROJECT_ID ,
  dataset: 'production',
  apiVersion: '2022-09-08',
  useCdn: true,
  token: import.meta.env.VITE_APP_SANITY_TOKEN,
  ignoreBrowserTokenWarning: true
});

对于这个项目，我使用理智客户端

import { useState,useEffect } from 'react'
import {client} from './client'

function App() {
 const [User, setUser] = useState()

 useEffect(()=>{
    const getUserData=()=>{
       const query = `*[_type == "user" && _id == 'John']`;
       client.fetch(query).then((data)=>{
       console.log(data[0]) //return data as expected
       setUser(data[0])
       console.log(User) //return undefined
     })
   }
    getUserData()
 },[])

为什么当我重新加载页面时 setUser 不能在 useEffect 中工作并返回未定义？

Answer 1

你会。 不能立即获取数据 像这样使用新的 useEffect

import { useState,useEffect } from 'react'
import {client} from './client'

function App() {
 const [User, setUser] = useState()

 useEffect(()=>{
    const getUserData=()=>{
       const query = `*[_type == "user" && _id == 'John']`;
       client.fetch(query).then((data)=>{
       setUser(data[0])
     })
   }
    getUserData()
 },[])

 useEffect(()=>{
    if (User) {
       console.log(User)
    }
 },[User])

Answer 2

你不会得到任何日志，但你的代码是正确的。 这是因为setState(updater[, callback])
setState告诉它的子组件和组件需要重新渲染。 所以你不会立即得到改变的 state 值。 如果您在useState之前控制台日志，您会看到
起初它显示未定义，但在重新渲染后，您将获得更新的 state 值。