useEffect value remains same after defining it in useEffect in ReactJS

user_17692625 0
Viewed 38

I have a component in which I want to fetch an API after rendering, and put a response data in useState value.

So, after fetching API I'm trying to setState in useEffect callback, but nothing works.

const [values, setValues] = useState([])

useEffect(() => {
    fetchValues().then(function(result) {
        setValues(result.data)
    })
}, []);

Thanks for your help in advance.

use-state use-effect reactjs javascript
1 Answers

You need to chain another then method. For instance, if the returned data is JSON, to convert it to JS object:

const [values, setValues] = useState([])

useEffect(() => {
    fetchValues().then(result => result.json())
   .then(data => {
       setValues(data)
    })
}, []);

If the returned data is text, replace result.json() with result.text()

user_154810560
Related