错误：使用 antd 库时的钩子调用无效答案

【问题标题】：Error: Invalid hook call when use antd library错误：使用 antd 库时的钩子调用无效
【发布时间】：2022-07-14 13:27:15
【问题描述】：

我尝试使用来自 antd 库的输入来响应它显示错误：无效的挂钩调用。钩子只能在这一行的函数组件的主体内部调用 \setIsLoaded(true) 我试图更新反应和钩子都在顶级我如何解决问题

如果我删除了这一行

代码完美运行

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/bootstrap-icons@1.6.1/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>

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

使用$npm run build构建antd包

【讨论】：