How to stop executing a command the contains useState?-CodePudding

This is my code which sends a GET request to my backend (mySQL) and gets the data. I am using useState to extract and set the response.data .

const baseURL = 'http://localhost:5000/api/user/timesheet/13009';

const [DataArray , setDataArray] = useState([]);


axios.get(baseURL).then( (response)=>{
    setDataArray(response.data);
});

But useState keeps on sending the GET request to my server and I only want to resend the GET request and re-render when I click a button or execute another function.

Server Terminal Console

Is there a better way to store response.data and if not how can I stop automatic re-rendering of useState and make it so that it re-renders only when I want to.

CodePudding user response：

you have to wrap your request into a useEffect.


const baseURL = 'http://localhost:5000/api/user/timesheet/13009';

const [DataArray , setDataArray] = useState([]);


React.useEffect(() => {
  axios.get(baseURL).then((response)=>{
    setDataArray(response.data);
  })
}, [])

The empty dependency array say that your request will only be triggered one time (when the component mount). Here's the documentation about the useEffect

CodePudding user response：

Add the code to a function, and then call that function from the button's onClick listener, or the other function. You don't need useEffect because don't want to get data when the component first renders, just when you want to.

function getData() {
  axios.get(baseURL).then(response => {
    setDataArray(response.data);
  });
}

return <button onClick={getData}>Get data</button>

// Or
function myFunc() {
  getData();
}

CodePudding user response：

As pointed out in the comments, your setState call is triggering a re-render which in turn is making another axios call, effectively creating an endless loop.

There are several ways to solve this. You could, for example, use one of the many libraries built for query management with react hooks, such as react-query. But the most straightforward approach would be to employ useEffect to wrap your querying.

BTW, you should also take constants such as the baseUrl out of the component, that way you won’t need to include them as dependencies to the effect.

const baseURL = 'http://localhost:5000/api/user/timesheet/13009';

const Component = () => {
   const [dataArray , setDataArray] = useState([]);

  useEffect(() => {
    axios.get(baseURL).then( (response)=>{
       setDataArray(response.data);
    });
   }, []);
  
  // your return code
}

This would only run the query on first load.