為什么 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 值。