警告：在渲染不同的组件 (BookingConfirmationModal) 时无法更新组件 (Bookings)。要在 BookingConfirmationModal 中找到错误的 setState() 调用，请按照描述的堆栈跟踪进行操作！
在 React 应用程序中，您经常会遇到这种可怕的错误。当您尝试修改一个组件（Bookings）的状态（主要是父组件），而它正在渲染另一个组件（BookingConfirmationModal）（它是子组件）并且您可能已将 setState() 函数传递给它作为道具。但是，这可能会导致应用程序 UI 出现意外行为和不一致。
在这篇博客中，我将尝试指导您了解此错误，调试其根源，并实施有效的解决方案以防止它再次出现在您的 React 项目中。
React 的渲染过程被设计为高效且可预测的。当组件的状态或属性发生变化时，React 会启动重新渲染过程。在此过程中，React 会遍历组件树，根据需要更新并重新渲染组件。“渲染时无法更新状态”错误的核心问题在于违反了这种可预测的渲染顺序。当一个组件尝试在自己的渲染阶段修改另一个组件的状态时，它会破坏渲染周期并可能导致：
渲染阶段的状态更新：最可能的原因是您在渲染方法内或 BookingConfirmationModal 的渲染过程中调用了 setState。
渲染中的副作用：您可能会直接在渲染方法中执行副作用（例如获取数据或更新状态），这是应该避免的。
要解决此问题，您应该确保在渲染阶段不会发生状态更新！您可以采取以下几个步骤：
import React, { useEffect } from 'react';
const BookingConfirmationModal = ({ someProp }) => {
useEffect(() => {
// Perform state updates here
// Example: setState(someValue);
}, [someProp]); // Add dependencies if needed
return (
<div>
{/* Your component JSX */}
</div>
);
};
避免在渲染中直接更新状态： 确保您没有在渲染方法或渲染期间调用的任何函数中直接调用 setState。
检查条件状态更新：如果您有更新状态的条件逻辑，请确保它不会在渲染阶段执行。
检查你的 useMemo: 如果你使用了 useMemo 以防万一，请将其删除并在子组件中使用 useEffect 代替，以便它能够运行组件安装后或将您 useMemo 移动到父组件。这将解决警告问题。
可能的解决方案如下 -
import { useState, useEffect } from "react";
import BookingConfirmationModal from "./BookingConfirmationModal";
function App() {
const [showModal, setShowModal] = useState(false);
// other code
return (
<div>
<h1>This is app</h1>
<button onClick={() => setShowModal(true)}>Show Modal</button>
{showModal ? <Testing BookingConfirmationModal={setTestingState} /> : null}
</div>
);
}
export default App;
// BookingConfirmationModal.jsx
const BookingConfirmationModal= ({ setTestingState }) => {
useEffect(()=> {
setTestingState(false)
}, [setIsModalVisible]) //or other required dependencies
return (
<div>
<button onClick={() => setTestingState(false)}>Close Modal</button>
// other codes
</div>
);
};
export default BookingConfirmationModal;
编码愉快！
想给建议：-
在 Linkedin Twitter 上找到我
给我发电子邮件：labib.ahmed.372@gmail.com
以上是渲染时错误的 setState() 调用和可能的解决方案！的详细内容。更多信息请关注PHP中文网其他相关文章！
