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

【问题标题】：How to stop executing a command the contains useState?如何停止执行包含 useState 的命令？
【发布时间】：2021-11-17 14:19:35
【问题描述】：

这是我的代码，它向我的后端 (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 的自动重新渲染并使其仅在我想要的时候重新渲染。

【问题讨论】：

您能在此处添加此组件的完整代码吗？看起来您正在渲染块中调用该函数，这会在调用 setDataArray 后立即导致重新渲染
你可以使用 Redux 来存储它。并使用 useSelector 从状态中捕获这些数据。

标签： javascript arrays reactjs axios use-state

【解决方案1】：

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

有几种方法可以解决这个问题。例如，您可以使用为带有反应挂钩的查询管理而构建的众多库之一，例如 react-query。但最直接的方法是使用 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
}

这只会在第一次加载时运行查询。

【讨论】：

【解决方案2】：

您必须将您的请求包装到 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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：