How to call the array out in a function with axios in react?

user_19423226 0
Viewed 41

It should be a simple question. But I can't figure it out. I want to display the database's length of row (Mysql) and I did it by using axios.

Then I push it into an array but it appears the problem!

Console

I can't call the required value [217].

import React ,{useState, useEffect} from 'react';
import axios from 'axios';
import { valueHandler } from 'mssql/lib/base';


function Home() {

  const Countrow = [1,2,3]; //these 3 data are for testing

  axios.get("http://localhost:3001/api/countStaff").then(res => {
    Countrow.push(res.data.length);
    // console.log(res.data.length);
    console.log('Countrow in axios.get:',Countrow);
  })

  console.log('Countrow:',Countrow);
  console.log('the 4th string of the array is: ',Countrow[4]);
  const listinfo = Countrow.map((number) =><li>{number}</li>);
  // const numbers = [1];
  // console.log(numbers);
  // const listItems = numbers.map((number) =><li>{number}</li>);

    return (
      <div>
       Hello World!
      <ul>{listinfo}<ul/>
      </div>
    )
}
export default Home

How can I solve it?

axios reactjs
2 Answers

The axios call is asynchronous, and if you don't await for it, your code will continue to run after your call without it having received the response yet.

So your two console logs that don't do what you expect are exhibiting expected behaviour. The values you log just aren't updated yet as your axios call hasn't received its result yet.

You could move those two lines into the then function. This will fix your logs, but this won't trigger your UI to render again. For this you will need to use state in React. You can do it like this.

const [countRow, setCountRow] = useState([1,2,3]);

axios.get("http://localhost:3001/api/countStaff").then(res => {
    setCountRow([...countRow, res.data.length];
});
user_191263120

There are 3 points you need to update for your component.

  1. You need to use React State for the state of the component. So in your case where you are using functional component, you would work with useState.
import React ,{useState, useEffect} from 'react';
import axios from 'axios';
import { valueHandler } from 'mssql/lib/base';


function Home() {

  // 1. Please use the state for the data in the React component
  // 2. Use lowerCase for the first letter of the state variable as the React ommunity recommends
  // const Countrow = [1,2,3]; //these 3 data are for testing

  // You can initiate the state when defining the state.
  const [countRow, setCountRow] = useState([1, 2, 3])
  
  // 3. Please use `useEffect` for the Axios Call (side effect)
  // Axios Call is the side effect, so that you need to call it inside of useEffect. 
  useEffect(() => {
    axios.get("http://localhost:3001/api/countStaff").then(res => {
      setCountRow(prev => [...prev, res.data.length]);
    });
  }, [])
  
  return (
    <div>
       Hello World!
       <ul>{countRow.map(number => <li>{number}</li>)}</ul>
    </div>
  )
}
export default Home
user_191036750
Related