为什么这两个变量在useEffect()方法中总是处于初始化状态?

Question

我需要使用setCuteName来根据scores数组的平均值(avg)更改cuteName变量。然而，在useEffect方法中，avg和scores始终是它们在顶部初始化时的值。即使设置了平均值，它仍然在控制台日志中打印出0。但我知道它不是0，因为在JSX中它显示的是实际的平均值。

现在，cuteName每次都被设置为相同的名称，因为avg总是0。我该如何解决或解决这个问题?因为这是我第一次使用钩子，所以我目前正在研究更多关于钩子和它们是如何工作的，但仍然没有找到解决这个问题的方法。

使用avg状态的JSX

<strong>Average Score:</strong> {avg} points

const [avg, setAvg] = useState(0);
const [scores, setScores] = useState(null);
let [cuteName, setCuteName] = useState('');

useEffect(() => {
usersCollection
.doc(user.uid)
.get()
.then(function (doc) {
if (doc.data().scores) {
let arr = doc.data().scores.reverse();
setScores(arr);
setLast(
month[arr[0].createdAt.toDate().getMonth()] +
' ' +
arr[0].createdAt.toDate().getDate() +
', ' +
arr[0].createdAt.toDate().getFullYear()
);
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum = sum + arr[i].score;
}

//AVG set here
setAvg((sum / arr.length).toFixed(2));

//NOTE: avg is always 0 and scores array is undefined
setCuteName(nicknames.forEach(function (score, index) {
if(avg>= score.bottom){
cuteName = nicknames[index].name;
}
}))

console.log("testing : " + cuteName);
} else {
setScores(undefined);
setLast('N/A');
}
setName(doc.data().firstName + ' ' + doc.data().lastName);
setSchool(doc.data().school);

});
}, []);

Answer 1

很难理解应用程序的总体目标，这个答案并不意味着真正让你达到你的最终目标。然而，我想指出你有许多问题，希望能给你指明正确的方向。

1. 大多数状态更改都是异步的，因此，当您调用setAvg((sum / arr.length).toFixed(2));时，您不应该期望avg变量在其正下方更改。
2. setAvg((sum / arr.length).toFixed(2));将avg的值设置为字符串，因此这样做if(avg>= score.bottom){将导致意外行为。
3. 将状态设置为undefined，因为forEach不返回任何内容:

setCuteName(nicknames.forEach(function (score, index) {
if(avg>= score.bottom){
cuteName = nicknames[index].name;
}
}))

除此之外，cuteName = nicknames[index].name;直接改变状态，这在React中是不允许的。

我希望这些东西对你有帮助。