useState isn't updating

Question

I'm fetching an api and want to change useState when the api is returned. However, it simply isn't updating.

Any suggestions?

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)
  }, [])

JeanJacquesGourdin · Answer 1 · 2022-06-30T18:34:44.393

I think there is something strange with your syntax.

Something like this should work :

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 
  }, [])
}

Moreover, setState is an async process so :

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

So you can use a useEffect to check state :

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

useState isn't updating

1 Answers1