當添加組件時反應最大調用堆棧

Question

我有一個列表組件，它從本地json文件獲取信息，如果我按照以下方式進行操作，則所有操作都按預期進行。

import React from 'react'; 
import caseStudies from './case-studies.json'; 

import CaseStudyItem from './case-study-list'; 

const CaseStudyList =() => { 

    const caseStudyItems = caseStudies.map(caseStudy => { 
     console.log(caseStudy); 
     return (
      <div key={caseStudy.name}>{caseStudy.name}</div> 
     ); 
    }); 


    return (
     <ul> 
      {caseStudyItems} 
     </ul> 
    ); 
} 

export default CaseStudyList; 

預期的案例研究數量打印出來沒有問題。

然而，如果我有以下

<CaseStudyItem key={caseStudy.id} caseStudy={caseStudy} /> 

更換caseStudies.map語句在div我得到了「最大規模調用堆棧超過誤差」如果我在裏面添加日誌語句就說明它吐出數百個項目。什麼會造成這種情況？

如果這裏需要的是CaseStudyItem組件，它現在只是空白用於測試目的。

import React from 'react'; 

const CaseStudyItem =() => { 

    return (
     <div>case Study</div> 
    ); 
} 

export default CaseStudyItem; 

Answer 1

我認爲你在CaseStudyList的內部製造新的CaseStudyLists。這是因爲你（可能）從錯誤的文件導入：

import CaseStudyItem from './case-study-list'; 

也許應該

import CaseStudyItem from './case-study-item'; 

當你輸入這個樣子，你能說出任何你想要導入的變量，所以你儘管是CaseStudyItem組件創建者實際上是CaseStudyList組件創建者。