如何停止执行包含useState的命令？

Question

这是我的代码，它向我的后端 (mySQL) 发送 GET 请求并获取数据。我正在使用 useState 来提取和设置 response.data .

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

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


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

但是 useState 一直在向我的服务器发送 GET 请求，而我只想在单击按钮或执行另一个功能时重新发送 GET 请求并重新呈现。

Server Terminal Console

是否有更好的存储方式response.data，如果没有，我该如何停止自动重新渲染 useState 并使其仅在我需要时重新渲染。

Answer 1

您必须将请求包装到 useEffect 中。


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

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


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

空的依赖数组表示你的请求只会被触发一次（当组件挂载时）。这是关于 useEffect

的 documentation

Answer 2

将代码添加到函数，然后从按钮的 onClick 侦听器或其他函数调用该函数。您不需要 useEffect 因为不想在组件首次呈现时获取数据，而只是在您想要的时候获取数据。

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

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

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

Answer 3

正如评论中所指出的，您的 setState 调用正在触发重新渲染，而重新渲染又会进行另一个 axios 调用，有效地创建了一个无限循环。

有几种方法可以解决这个问题。例如，您可以使用为带有反应挂钩的查询管理而构建的众多库之一，例如反应查询。但最直接的方法是使用 useEffect 来包装您的查询。

顺便说一句，您还应该从组件中取出诸如 baseUrl 之类的常量，这样您就不需要将它们作为依赖项包含在效果中。

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
}

这只会运行首次加载查询。

如何停止执行包含useState的命令？

How to stop executing a command the contains useState?

javascript

arrays

reactjs

axios

use-state