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

Question

这是我的代码，它发送一个GET请求到我的后端(mySQL)并获得数据。我使用useState提取和设置响应。数据。

const baseURL = 'http://localhost:5000/api/user/timesheet/13009';
const [DataArray , setDataArray] = useState([]);

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

但是useState继续向我的服务器发送GET请求，我只想在单击按钮或执行另一个函数时重新发送GET请求并重新渲染。

服务器终端控制台

是否有更好的方法来存储响应。如果没有，我如何停止自动重新渲染useState，并使它只在我想重新渲染时才重新渲染。

Answer 1

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

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

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

Answer 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

的文档

Answer 3

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

function getData() {
axios.get(baseURL).then(response => {
setDataArray(response.data);
});
}
return <button onClick={getData}>Get data</button>
// Or
function myFunc() {
getData();
}