USESTATE IS不更新

Question

我正在获取API，并希望在返回API时更改USESTATE。但是，它根本没有更新。

有什么建议吗？

const fictionApi = "http://localhost:3000/fiction"
const nonFictionApi = "http://localhost:3000/non_fiction"
const [fictionData, setFictionData] = useState(null)

const db = async (url) => {
    const res = await fetch(url)
    const data = await res.json()

    setFictionData(data)
    console.log(data.genre)
  }
  
  useEffect(() => {
    const db = async (url) => {
      const res = await fetch(url)
      const data = await res.json()
  
      setFictionData(data)
      console.log(fictionData)
    }
    
    db(fictionApi)
  }, [])

Answer 1

我认为您的语法有些奇怪。

这样的事情应该可以工作：

const fictionApi = "http://localhost:3000/fiction"
const nonFictionApi = "http://localhost:3000/non_fiction"

export default function Page () {
  const [fictionData, setFictionData] = useState(null);
  const [url, setUrl] = useState(fictionApi); // ';' very important
  
  useEffect(() => {
    (async () => {
      const res = await fetch(url)
      const data = await res.json()
      setFictionData(data)
    })() //Self calling async function 
  }, [])
}

此外，setState是一个异步过程，因此：

const [fictionData, setFictionData] = useState(null);
setFictionData(true)
console.log(fictionData) //null

因此，您可以使用使用效率检查状态：

const [fictionData, setFictionData] = useState(null);
useEffect(()=>{
  console.log(fictionData) //true
},[fictionData])
setFictionData(true)