錯誤 JSX 元素類型‘Header’沒有任何構造或調用簽名”是什么意思？

Question

我寫了這段代碼，錯誤顯示在 Header 和列表中。 它一直說 JSX 元素類型 Header 沒有任何構造......？

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import { Header, List } from 'semantic-ui-react';


function App() {
  const [admin, setAdmin] = useState([]);


  useEffect(() => {
    axios.get('http://localhost:5000/api/admin').then(response => {
      console.log(response);
      setAdmin(response.data);
    })
  }, [])

  return (
    <div>
      <Header as='h2' icon='users' content='Reactivities'/>     
          <List>
          {admin.map((AppUser: any) => (
            <List.Item key={AppUser.id}>
              {AppUser.city}
            </List.Item>
          ))}
          </List>
          </div>
  );  
}

export default App;

Answer 1

我很長一段時間都在為同樣的錯誤而苦苦掙扎。 最后，我的原因是版本不兼容。 它通過這種組合得到修復：

"react": "^17.0.2",
"react-dom": "^17.0.2",
"semantic-ui-react": "^2.1.2"
"@types/react": "^17.0.3",
"@types/react-dom": "~17.0.3"