React Flow应用程序获得错误:无效钩子调用.钩子只能在函数组件的内部调用

Question

下面是给出此错误的函数的简化版本。我认为它满足了所有的要求，因为它是从UI中的按钮点击调用的，而不是从另一个JavaScript函数调用的。

function LoadData() {
const [graphData, setJsonResults] = useState([]);
useEffect(() => {
async function fetchData() {
const data = await GetData();
setJsonResults(data);
}
fetchData();
}, []);
return (
<div>
{graphData.map((item, index) => (
<p key={index}>{item}</p>
))}
</div>
);
}

和这个将初始html加载到浏览器的函数，其中包含调用LoadData函数的click按钮。

export default function App() {
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);
return (
<div style={{ width: '100vw', height: '100vh' }}>
<button className="MyNewButton" onClick={LoadData}>Load Data</button>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={setNodes}
onEdgesChange={setEdges}
>
<Controls />
<MiniMap />
<Background variant="dots" gap={12} size={1} />
</ReactFlow>
</div>
);
}

有人可以解释为什么我得到这个错误和如何解决它?

谢谢。

下面是我的package.json:

{
"name": "my-react-flow-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"antd": "^5.3.3",
"neo4j-driver": "^5.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"reactflow": "^11.7.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"vite": "^4.2.0"
}
}

也确保我没有不匹配的React和React DOM版本:

npm ls react-dom
├─┬ antd@5.3.3
│ ├─┬ @ant-design/cssinjs@1.7.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @ant-design/icons@5.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @rc-component/mutate-observer@1.0.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @rc-component/tour@1.8.0
│ │ ├─┬ @rc-component/portal@1.1.1
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @rc-component/trigger@1.6.2
│ │ ├─┬ rc-align@4.0.15
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-cascader@3.9.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-checkbox@2.3.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-collapse@3.5.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-dialog@9.0.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-drawer@6.1.5
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-dropdown@4.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-field-form@1.28.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-image@5.15.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-input-number@7.4.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-input@0.2.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-mentions@2.1.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-menu@9.8.3
│ │ ├─┬ rc-overflow@1.3.0
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-motion@2.6.3
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-notification@5.0.3
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-pagination@3.3.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-picker@3.3.4
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-progress@3.4.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-rate@2.10.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-resize-observer@1.3.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-segmented@2.1.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-select@14.3.0
│ │ ├─┬ rc-virtual-list@3.4.13
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-slider@10.1.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-steps@6.0.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-switch@4.0.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-table@7.31.1
│ │ ├─┬ @rc-component/context@1.3.0
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tabs@12.5.10
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-textarea@1.1.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tooltip@6.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tree-select@5.7.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tree@5.7.3
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-trigger@5.3.4
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-upload@4.3.4
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-util@5.29.3
│ │ └── react-dom@18.2.0 deduped
│ └── react-dom@18.2.0 deduped
├── react-dom@18.2.0
└─┬ reactflow@11.7.0
├─┬ @reactflow/background@11.2.0
│ └── react-dom@18.2.0 deduped
├─┬ @reactflow/controls@11.1.11
│ └── react-dom@18.2.0 deduped
├─┬ @reactflow/core@11.7.0
│ └── react-dom@18.2.0 deduped
├─┬ @reactflow/minimap@11.5.0
│ └── react-dom@18.2.0 deduped
├─┬ @reactflow/node-resizer@2.1.0
│ └── react-dom@18.2.0 deduped
├─┬ @reactflow/node-toolbar@1.1.11
│ └── react-dom@18.2.0 deduped
└── react-dom@18.2.0 deduped

PS:

我改变了LoadData函数，但仍然得到相同的错误:

const LoadData =()=>{
const [graphData, setJsonResults] = useState([]);
return (
<div>
Happy Days are here again
</div>
)  
}

Answer 1

问题是LoadData被用作事件处理程序，而不是组件。你应该这样做:

function LoadData({ shouldLoad }) {
const [graphData, setJsonResults] = useState([]);
useEffect(() => {
async function fetchData() {
const data = await GetData();
setJsonResults(data);
}
if (shouldLoad) {
fetchData();
}
}, [shouldLoad]);
return (
<div>
{graphData.map((item, index) => (
<p key={index}>{item}</p>
))}
</div>
);
}

export default function App() {
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);
const [shouldLoad, setShouldLoad] = useState(false);
return (
<div style={{ width: '100vw', height: '100vh' }}>
<button className="MyNewButton" onClick={() => setShouldLoad(true)}>Load Data</button>
<LoadData shouldLoad={shouldLoad} />
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={setNodes}
onEdgesChange={setEdges}
>
<Controls />
<MiniMap />
<Background variant="dots" gap={12} size={1} />
</ReactFlow>
</div>
);
}

Answer 2

请使用功能箭头

改变这个类

function LoadData() {

const LoadData =()=>{}