元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：未定義。 在 nextjs 中

Question

我收到這種類型的錯誤如何解決 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)You likely forgot to export your component from the file it's defined in, or您可能混淆了默認導入和命名導入。

import React, { useEffect, useState } from 'react'
import Dashborad from './Dashborad'
import Modal from '../../src/Component/InputDataModel';
import Image from 'next/image'
export default function other() {
const [Data, setData] = useState([]);
const [modalOn, setModalOn] = useState(false);
const [id, setId] = useState('');
const [isLimitOfArticle, setisLimitOfArticle] = useState(0)
useEffect(() => {
fetch('http://localhost:3000/api/admin/other').then(e => e.json()).then(e => {
console.log(e)
setData(e.data)
})
}, [])
const handleOKClick = () => {
// set
}
const handleCancelClick = () => {
setModalOn(false)
}
return (
<Dashborad>
   <div>
      <table class="table-fixed mt-10 border-2">
         <thead>
            <tr>
               <th className='border-2 p-3'>categoryId</th>
               <th className='border-2 p-3'>isLimitOfArticle</th>
               <th className='border-2 p-3'>CreatedAt</th>
               <th className='border-2 p-3'> UpdatedAt</th>
               <th className='border-2 p-3'> Edit </th>
               <th className='border-2 p-3'> Delete </th>
            </tr>
         </thead>
         <tbody>
            {
            Data.map((current) => {
            return <>
            <tr>
               <td className='border-2 p-3'>{current?.categoryId?.text} </td>
               <td className='border-2 p-3'>{current?.isLimitOfArticle}</td>
               <td className='border-2 p-3'>{current?.createdAt} </td>
               <td className='border-2 p-3'>{current?.updatedAt} </td>
               <td className='border-2 p-2' >
                  <Image className='mx-auto text-center m-5 w-10 cursor-pointer ' onClick={() =>
                  {
                  console.log(current)
                  setId(current._id)
                  setModalOn(true)
                  }} src="/edit.svg" width={20} height={20} />
               </td>
               <td className='border-2 p-2' >
                  <Image className='mx-auto text-center m-5 w-10 cursor-pointer ' onClick={() =>
                  {
                  setId(current._id)
                  setModalOn(true)
                  }} src="/delete-button-6030454_960_720.png" width={20} height={20} />
               </td>
            </tr>
            </>
            })
            }
         </tbody>
      </table>
      {modalOn && 
      <Modal handleCancelClick={handleCancelClick} handleOKClick={handleOKClick} settext={setisLimitOfArticle} text={isLimitOfArticle} renderText="Add Category" />
      }
   </div>
</Dashborad>
)
}

在此處輸入圖像描述

怎么解決？ 我也使用其他東西但是當我點擊 onclick 事件時這里顯示錯誤

Answer 1

export default function other()更改為export default function Other() - 您必須將所有導出的組件大寫，否則它們將無法工作，請嘗試。