为什么useState react钩子会导致太多的重渲染.React限制渲染的数量，以防止无限循环?

Question

我有以下脚本

const [setList, setSetList] = useState({ data: null });
const [currentUser, setCurrentUser] = useState({ data: null });
const [username, setUserName] = useState();

const Token = localStorage.getItem('token')
console.log(Token)
useEffect(() => {
const fetchData = async () => {
const setlist = await axios.get(
'http://127.0.0.1:8000/api/set/list/', {
headers: {
Authorization: `Token ${Token}`
}
});
const setuserdata = await axios.get(
'http://127.0.0.1:8000/api/user/current/', {
headers: {
Authorization: `Token ${Token}`
}
});
setCurrentUser({ data: setuserdata.data });
setSetList({ data: setlist.data });
};

fetchData();
}, []);

console.log('render');
if (currentUser.data) {
console.log("userdata", currentUser.data);
console.log("userdata", currentUser.data.username);
**setUserName(currentUser.data.username);**
}

尝试调用setUserName会导致过多的重新渲染。React限制了渲染的次数，以防止无限循环。我似乎找不到原因。

Answer 1

因为你在每次渲染时调用setUserName。设置状态会触发重新渲染。所以在每次渲染时，你都会触发一次重新渲染。

如果你想在currentUser.data变化时触发某些东西，那么不要在每次渲染时检查它，在useEffect钩子中检查它。例如:

useEffect(() => {
// currentUser.data has changed, update something
}, [currentUser.data]);

但是在这个特殊的情况下你根本不需要这些。您正在复制状态:

中的值

const [currentUser, setCurrentUser] = useState({ data: null });
const [username, setUserName] = useState();

既然username是currentUser的一部分，那么你不需要username，因为你有currentUser。只要完全删除username状态和任何设置/使用它的代码，并引用currentUser.data.username代替。

如果你想对username进行速记，这样你就不必每次都写currentUser.data，那么在渲染时只需设置一个值，而不是在状态中跟踪它:

const username = currentUser?.data?.username;