如何在 React 函数组件中不使用效果钩子的情况下获取数据?

Question

我知道使用钩子时的传统方法是使用useEffect钩子获取数据。但是为什么我不能只在功能组件中调用 axios 而不是钩子，然后设置数据。

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

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

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

Answer 1

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

每次组件渲染时，例如由于 props 更改或由于钩子更改，都会调用该axios.get请求。当它收到响应时，它将更新状态。然后，由于状态已更改，组件将重新呈现，并再次调用axios.get。状态再次改变，请求再次提出，永远。

Answer 2

更喜欢useEffect(() => code... , []).

也就是说，您也可以在避免无限循环的同时做到这一点，但这是一个非常糟糕的做法，我不建议这样做。

是的，您将重新渲染，但不会有无限循环。使用 useState 的 lazy init 函数。

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

Answer 3

最佳实践是：

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