自定义钩子的奇怪行为

Question

我已经做了自定义的axios钩子。

// src/useAxios.js
import { useState, useEffect } from 'react';
import axios from 'axios';
export const useAxios = url => {
const [state, setState] = useState({ data: null, loading: false });
useEffect(() => {
setState(currentState => ({
...currentState,
loading: true
}));
axios.get(url).then(response => {
setState(currentState => ({
...currentState
data: response.data.body
}));
});
setState(currentState => ({
...currentState,
loading: false
}));
}, [url]);
return state;
};

应用组件使用此挂钩。

// src/App.js    
import React from 'react';
import { useAxios } from './useAxios';
const App = () => {
const { data, loading } = useAxios(
'https://jsonplaceholder.typicode.com/posts/1'
);
console.log(loading);
return <div>{loading ? 'loading..' : data}</div>;
};
export default App;

我已将console.log添加到应用程序组件以检查其工作原理。

它记录了false false false.

我所期望的是false true true false，因为变量负载正在改变四次。

但是如果我像下面这样更改钩子，它会正确记录false true false。

import { useState, useEffect } from 'react';
import axios from 'axios';
export const useAxios = url => {
const [state, setState] = useState({ data: null, loading: false });
useEffect(() => {
setState(currentState => ({
...currentState,
loading: true
}));
axios.get(url).then(response => {
setState(currentState => ({
loading: false,
data: response.data.body
}));
});
}, [url]);
return state;
};

问题出在哪里？

我们不能在useEffect中使用两次以上的useState吗？

第一个钩子有什么问题？

Answer 1

问这个是愚蠢的。

第一个记录"假假假"的原因是

由于 setState 是一起批处理的，因此无法记录 true。

我犯了一个致命的错误，我在承诺之后使用了useState，而不是在里面。

这是正确的代码。

import { useState, useEffect } from 'react';
import axios from 'axios';
export const useAxios = url => {
const [state, setState] = useState({ data: null, loading: false });
useEffect(() => {
setState(currentState => ({
...currentState,
loading: true
}));
axios.get(url).then(response => {
setState(currentState => ({
...currentState,
data: response.data.body
}));
setState(currentState => ({
...currentState,
loading: false
}));
});
}, [url]);
return state;
};

它记录假真真假如我所料