警告：React 检测到 App 调用 Hooks 的顺序发生了变化[重复]答案

【问题标题】：Warning: React has detected a change in the order of Hooks called by App [duplicate]警告：React 检测到 App 调用 Hooks 的顺序发生了变化[重复]
【发布时间】：2022-10-02 15:09:07
【问题描述】：

我正在尝试在 React 中创建一个事件管理器，但我对一个功能有疑问：

弹出对话框窗口（DialogWindow.js）组件中有一个Apply按钮：

       

 <Button 
            onClick={()=>{
                const temp = makeAnEvent()  //function gaining all dialog inputs into one object
                localStorage.setItem(\"Event_\"+temp.key, JSON.stringify(temp))
                handleClose() //function closing a dialog
                clearDialog() // fucntion clearing inputs
            }}
        >
            Apply
        </Button>

这是我在 Parent (App.js) 组件中使用的状态和函数：

    const [events,setEvents] = useState(Object.values(localStorage))
    
    const updateEvents = () => {
        setEvents(Object.values(localStorage))
        console.log(\"Events Updated!\")
    }

我还有一个组件 MakeAnEventHMTML(object) 从给定的事件对象构建一个 html。我在 App.js 中使用它来查看所有事件：

{events.map((element)=>(MakeAnEventHTML(JSON.parse(element))))}

当我点击“应用”按钮时，浏览器中的所有内容都消失了，并且我在控制台中收到了一堆错误：

1：React 检测到 App 调用 Hook 的顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读 Hooks 规则

2：未捕获的错误：渲染的钩子比上一次渲染时更多

3：上述错误发生在组件中

4：未捕获的错误：渲染的钩子比上一次渲染时更多

标签： javascript reactjs function react-hooks local-storage

【解决方案1】：

您可能需要在组件中提高 useState 实例化。如果上面有条件渲染语句，则会发生此错误。

【讨论】：

谢谢，我去看看。现在我可以通过使用 MakeAnEventHTML 作为 React 组件而不是函数来映射 evebt 来处理它。