Question

我是 React 的新手，现在我想在表，现在我收到了这个错误。请帮帮我。

无效的钩子调用。 Hooks 只能在 a 的 body 内部调用功能组件。这可能发生在以下情况之一原因： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了规则 Hooks 3. 你可能在同一个应用中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅

 import "./App.css";
 import { Container } from "semantic-ui-react";
 import MainHeader from "./components/MainHeader";
 import NewEntryForm from "./components/NewEntryForm";
 import DisplayBalance from "./components/DisplayBalance";
 import DisplayBalances from "./components/DisplayBalances";
 import EntryLiness from "./components/EntryLiness";
 import { useState } from "react";
 import ModalEdit from "./components/ModelEdit";
 import { createStore } from "redux";

 function App() {
   const [entries, setEntries] = useState(initialEntries);
   const [description, setDescription] = useState("");
   const [value, setValue] = useState("");
   const [isExpense, setIsExpense] = useState(true);
   const [isOpen, setIsOpen] = useState(false);

   function deleteEntry(id) {
     const result = entries.filter((entry) => entry.id !== id);
     setEntries(result);
   }
   function editEntry(id) {
     if (id) {
       setIsOpen(true);
     }
   }

   const store = createStore((state = initialEntries) => {
     return state;
   });

   function addEntry(description, value, isExpense) {
     const result = entries.concat({
       id: entries.length + 1,
       description,
       value,
       isExpense,
     });
     setEntries(result);
   }

   return (
     <Container>
       <MainHeader type="h1" title="Budget" />
       <DisplayBalance size="small" value="2,424.0" title="Your Balance" />
       <DisplayBalances />
       <MainHeader type="h3" title="History: " />
       <EntryLiness
         entries={entries}
         deleteEntry={deleteEntry}
         editEntry={editEntry}
       />
       <MainHeader type="h3" title="Add new transaction: " />
       <NewEntryForm
         addEntry={addEntry}
         value={value}
         setValue={setValue}
         description={description}
         setDescription={setDescription}
         isExpense={isExpense}
         setIsExpense={setIsExpense}
       />
       <ModalEdit isOpen={isOpen} setIsOpen={setIsOpen} />
     </Container>
   );
 }

 export default App;

 var initialEntries = [
   {
     id: 1,
     description: "Work incom",
     value: "1000$",
     isExpense: false,
   },
   { id: 2, description: "Water incom", value: "100$", isExpense: true },
   { id: 3, description: "drink incom", value: "4000$", isExpense: false },
   { id: 4, description: "holla incom", value: "1000$", isExpense: true },
   { id: 5, description: "danger incom", value: "600$", isExpense: false },
   { id: 6, description: "Work incom", value: "859$", isExpense: true },
 ];

`无效的钩子调用反应`

0 个答案: