REACT HOOKS - 将 JSON 数据（从 API 通过 Axios）传递到 const

Question

In the backend I am processing the data and then sending it to React through JSON. Here is the code.

  res.setHeader('Content-Type', 'application/json');
  var obj = {field: current, fieldCnt: cnt }
  var obj2 = JSON.stringify(obj)
  res.write(obj2);
  var obj3 = {length: currentcnt, field2: current, fieldCnt2: cnt }
  var obj4 = JSON.stringify(obj3)
  res.end(obj4);

The backend I showed here is not the same as it is. I just showed it as an example. I had to use res.write and res.end because I had to collect data for different if conditions.

Below here is the code in react where I am getting this data through Axios.

var data2 =  axios.get('http://localhost:5000/get').then(res => {
   console.log(res.data)      //Check the Attached Chrome Developers console image.
   return res.data
});

const data3 = data2.length   //This isn't working (length can be seen the console image last line "length" : 18)

Chrome Developers console image

Please tell me how to solve this with React Hooks. I think it has to be done with mapping but i don't how.

Answer 1

To solve this with hooks you can fetch data when the component loads with useEffect hook and store it inside useState hook.

  const [data, setData] = useState([])

  useEffect(() => {
    axios.get('http://localhost:5000/get').then(res => setData(res.data))
  }, [])

  const data3 = data.length

Answer 2

As @Tobias Geiselmann said axios.get() returns a promise, and you're assigning the length of the promise.

If you return a value from .then() , the next then() is called with that value.

After looking at your screenshot. It looks like you're trying to access the length property from the data return by your API. I would recommend structuring your API response like so

{
  count: 18,
  results: [
    { key: 'val' },
    { key: 'val' },
    { key: 'val' },
  ]
}

By doing so you'll be to access the length with:

res.data.count // will have the count
res.data.results // will have all the results

Try this

axios.get('http://localhost:5000/get').then((res) => {
   console.log(res.data.length); // will print the length
});

another example:

const data2 = axios.get('http://localhost:5000/get')
  .then((data) => {
    return data;
  });

data2.then(data => {
  console.log(data.length) // will print the length
})

example with async/await

const myFunc = async () => {
  const { data } = await axios.get('http://localhost:5000/get');

  console.log(data.length); // will print the length
};