useState 和 useRecoilState return 尝试在 API 响应上设置值字符串时未定义

Question

我在使用 useState 和 useRecoilState 时遇到了一个大问题。特别是，我用 DELETE 方法调用 rest api，这个调用 returns 我一个 jobId 以便将来能够轮询，以便了解此作业的状态。调用成功并且响应 returns 正确，但是当我尝试设置“ReturnJobId”状态时，它变得未定义。不会返回任何控制台错误或警告。我试过同时使用反应状态和反冲状态，它们都有相同的结果。我希望状态设置正确，因为它是一个简单的字符串。下面是有问题的代码。正如您从代码中看到的那样，有问题的变量“returnedJobId”被初始化为 null，但在尝试设置后它变得未定义。这甚至不是时间问题，我试图在几秒钟后生成控制台日志，但状态仍然未定义。提前感谢任何试图帮助我的人

const [returnedJobId, setReturnedJobId] = useState(null);
fetch(basePath + "/digital/cpes/" + cpeToReset + "/redreset", {
            method: 'DELETE',
            headers: {
                federationId: userFederationId
            }
        }).then(res => res.json())
            .then(data => {
                console.log("Dati ordine di reset: ", data);
                if (data.code !== 200) {
                    setIsResetting(false);
                    console.log("Response code errato: ", data.code);
                } else {
                    console.log("Ordine di reset OK");
                    setReturnedJobId(data.jobId); /*This is the problematic instruction */
                    console.warn('Setto il seguente job id: ', data.jobId);
                    setTimeout(() => {
                        console.log("Stato del job id: ", returnedJobId); /*Here is undefined*/
                    }, 1000);

                }
            })

Answer 1

我假设 returnedJobId 是对应于 setReturnedJobId 状态更新器的值。我还假设您在 setTimeout 中记录状态，因为您知道状态更新不会立即发生。您仍然遇到问题的原因是过时的关闭。

请注意，如果您正确声明了状态，returnedJobId 就是 const。 A const 不能改变。即使您延迟了变量的记录，它仍然是一个 const 并且永远不会被更新。

useState 的工作方式是在下一次渲染上捕获新状态的值。在函数式组件中，下一次渲染对应于函数式组件被 React 调用的下一次。当调用 any 函数（组件或其他）时，所有局部变量都是全新的。先前渲染的局部变量被销毁，并在其位置创建新的局部变量。 useState 非常有用，因为它将新的 const 分配给您传递给更新程序函数的值。它有更新const的错觉，但实际上它是一个全新的变量。

因此无论如何，您无法在当前渲染期间获取状态的新值。你必须等到下一个。最常见的方法是使用 useEffect.

useEffect(() => { console.log("Stato del job id: ", returnedJobId); }, [returnedJobId]);

useState 和 useRecoilState return 尝试在 API 响应上设置值字符串时未定义

useState and useRecoilState return undefined when try to set a value string on API response

reactjs

use-state