错误：使用 antd 库时无效的钩子调用
我尝试在 React 中使用 antd 库的输入，它显示
错误：无效的挂钩调用。钩子只能在主体内部调用 此行中的函数组件的 \setIsLoaded(true)
我尝试更新 React 并且 hooks 全部位于顶层。我该如何解决这个问题？
如果我删除此行
import React , { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';
import {Input} from 'antd';
import './style.scss';
const header = ["Name", "User Name", "Email", "Number Of Albums"];
function App(){
const { Search } = Input;
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users").then((res) => res.json()).then(
(result) => {
setIsLoaded(true);
setItems(result);
},
(error) => {
setIsLoaded(true);
setError(error);
}
);
}, []);
if (error) {
return <>{error.message}</>;
} else if (!isLoaded) {
return <>loading...</>;
} else {
return(
<div className="w">
<div className="col-2">
<Search placeholder="input search text" allowClear style={{ width: 200 }} />
</div>
<table>
<thead>
<tr>
{header.map((h, i) => <th key={i}>{h}</th>)}
</tr>
</thead>
<tbody>
{
items.map((item) => {
return (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.username}</td>
<td>{item.email}</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
}
ReactDOM.render(<App/>, document.getElementById("col-3"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="row">
<div id="col-1"><h1>User gallery</h1></div>
<div id="col-3">
<div id="tableContainer">
</div>
</div>
</div>
</body>
</html>I try to use input from antd library in react it shows
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component in this line \setIsLoaded(true)
I tried to update react and hooks is all in top level. How can I solve this problem?
If I delete this line <Search placeholder="input search text" allowClear style={{ width: 200 }} />, the code works perfectly.
import React , { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';
import {Input} from 'antd';
import './style.scss';
const header = ["Name", "User Name", "Email", "Number Of Albums"];
function App(){
const { Search } = Input;
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users").then((res) => res.json()).then(
(result) => {
setIsLoaded(true);
setItems(result);
},
(error) => {
setIsLoaded(true);
setError(error);
}
);
}, []);
if (error) {
return <>{error.message}</>;
} else if (!isLoaded) {
return <>loading...</>;
} else {
return(
<div className="w">
<div className="col-2">
<Search placeholder="input search text" allowClear style={{ width: 200 }} />
</div>
<table>
<thead>
<tr>
{header.map((h, i) => <th key={i}>{h}</th>)}
</tr>
</thead>
<tbody>
{
items.map((item) => {
return (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.username}</td>
<td>{item.email}</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
}
ReactDOM.render(<App/>, document.getElementById("col-3"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="row">
<div id="col-1"><h1>User gallery</h1></div>
<div id="col-3">
<div id="tableContainer">
</div>
</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用
$npm run build构建 antd 包Use
$npm run buildto build antd package