Question 239965 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – UseState not updating the state after API call

I am trying to use useState hook and set the state after API call, but no matter how much time it never updates.

I want to use that state in other component using useContext. Now I only want my route to it when my state gets updated. How to achieve it?

My code:

const [openedFeedback, setOpenedFeedback] = useState<ProductRequest>({id: 0, title: '', category: '', upvotes: 0, status: '', description: '', comments: []})

const getFeedbackById = async (id: number) => {
    const url = `${host}api/product-requests/${id}`
    const response = await fetch(url, {
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      mode: 'cors', // no-cors, *cors, same-origin
      headers: {
        'Content-Type': 'application/json',
      }
    });

    const json = await response.json()
    
    setOpenedFeedback(json);
  }

The code for routing, triggers on click:

const openFeedback = async (id: number) => {
    await getFeedbackById(id)
    router.push('/components/feedback-detail')
  }

Other component:

import Link from 'next/link'
import React, { useContext, useEffect } from 'react'
import './FeedbackDetails.scss'
import FeedbackContent from '../FeedbackContent'
import FilterContext from '@/app/context/filters/FilterContext'

export default function FeedbackDetails() {

  const { openedFeedback } = useContext(FilterContext)
  
  useEffect(() => {
    setFeedback(openedFeedback)
    console.log(feedback);
    
  }, [openedFeedback])

  return (
    <div className='outer-container'>
      <div className="inner-container">
        <div className="btns-container">
          <Link href='/' className='back-btn'>
            <svg width="7" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L2 5l4-4" stroke="#4661E6" strokeWidth="2" fill="none" fillRule="evenodd" /></svg>
            <span>Go Back</span>
          </Link>
          <Link href='/' className='edit-btn'>Edit Feedback</Link>
        </div>
        <div className="content-container">
          <FeedbackContent id={openedFeedback.id} title={openedFeedback.title} category={openedFeedback.category} upvotes={openedFeedback.upvotes} comments={openedFeedback.comments} description={openedFeedback.description} status={openedFeedback.status} />
        </div>
      </div>   
    </div>
  )
}
Tags:

2

Answers


  1. 0

    setState is a async function it will not log it directly instead use

    useEffect(()=>console.log(<stateName>),[<stateName>])

    to check the results and log it.

    Login or Signup to reply.
  2. 0

    You can use useSelector() hook to read the updated state in all components’ of the application.

    If required state field is state.apiResponse, useSelector(state.apiResponse) will serve the updated value to all components.

    Note: Don’t forget to dispatch action to set updated response to state after api call.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search