开玩笑测试中 React 中的两个 useEffect 之间的状态未更新答案

【问题标题】：State not updating between two useEffect in React in jest test开玩笑测试中 React 中的两个 useEffect 之间的状态未更新
【发布时间】：2021-05-21 23:40:08
【问题描述】：

我为两个不同的 redux 变量使用了两个 useEffect。当我在浏览器中运行应用程序时一切正常，但它没有通过开玩笑测试，因为状态没有更新。以下是代码：

import { useState, useEffect } from 'react';

const [testString, setTestString] = useState('test');

useEffect(() => {
  setTestString('changed');  
}, [testA]);

useEffect(() => {
  console.log(testString);  
}, [testB]);

我在开玩笑时通过了 testA 和 testB 并且这些效果以正确的顺序运行。但是当它在第二个 useEffect 中打印时 testString 没有更新，它仍然将值显示为“测试”。知道我在哪里出错了吗？

【问题讨论】：

"test" 是第一次渲染的正确值。你是说它不会用新值再次渲染？
即使是第一次渲染也不应该打印更改的值，因为当它到达 testA useEffect 时，它更新了值，是的，即使是第二次渲染，它也没有更新值，我也很困惑如何它可以在浏览器中运行，但不能在开玩笑测试中运行？
这是由于 setTestString 将异步设置状态以及 react 如何运行 useEffects 造成的。它将运行，找到并运行第一个 useEffect，然后在更新值之前在同一渲染通道中找到并运行第二个 useEffect。
@JacobSmit 我很好奇当应用程序在浏览器中运行时它是如何工作的。那么开玩笑的方法是什么？

标签： reactjs jestjs ts-jest

【解决方案1】：

在第一次渲染中，testString 设置为“测试”。渲染后，效果按顺序运行。

第一个运行并调用setTestString，但这不会改变testString。 testString 是 const 所以即使我们想要它也无法更改。 setTestString 的目的不是改变局部变量的值，而是告诉 react 重新渲染组件。当该渲染发生时，将使用新值创建新的局部变量，但您的第一个渲染无法访问这些未来值。

然后第二个效果运行。闭包中的testString 是第一次渲染中的testString，因此它会注销“测试”。

至于你关于开玩笑测试的问题，我需要看看你的测试代码是什么来评论的。

【讨论】：

所以经过反复试验，我可以看到一件有趣的事情。如果在创建模拟商店时开玩笑，我在 json 数据中通过了 testB，那么值不会改变，如果我没有通过testB 然后使用第一个初始值打印值，然后是更改后的值。