如何在React函数组件中不使用useEffect钩子获取数据？

Question

我知道使用钩子的常规方式是使用useEffect钩子来获取数据。但是为什么我不能只在功能组件中调用axios而不是一个钩子，然后设置数据。

基本上，我在问这样做有什么问题

const [users, setUsers] = useState(null);
axios.get("some api call")
  .then(res => setUsers(res.data))

在这里，我不使用useEffect，出什么问题了吗？

Answer 1

首选useEffect(() => code... , [])。

也就是说，您也可以在避免无限循环的情况下执行此操作，但这是非常糟糕的做法，我不建议这样做。

是的，您将进行重新渲染，但不会出现无限循环。使用useState's lazy init function。

const [users, getUsers] = useState(() => {
   axios.get("some api call")
     .then(res => getUsers(res.data))
});

Answer 2

做出这样的请求并更改渲染状态，将导致组件永久重新渲染。

每次渲染组件时，例如由于道具变更或由于钩子变更，axios.get请求被调用。收到响应后，它将更新状态。然后，由于状态已更改，因此该组件重新渲染，并再次调用axios.get。状态再次改变，并且永远再次发出请求。

Answer 3

最佳做法是：

const [users,getUsers]= useState();
useEffect ( () => {
   axios.get("some api call")
  .then(res=>getUsers(res.data))
}, []);