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;

打印出预期的案例研究数量没有问题。

但是，如果我使用以下

替换caseStudies.map语句中的div

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

如果我在其中添加一个日志语句，我会得到一个“最大调用大小超过错误”，它显示它吐出了数百个项目。会导致这种情况的原因是什么？

如果需要的话是CaseStudyItem组件，现在它只是用于测试目的。

import React from 'react';

const CaseStudyItem = () => {

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

export default CaseStudyItem;

Answer 1

我认为您在每个CaseStudyLists内添加了新的CaseStudyList。这是因为您（可能）从错误的文件导入：

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

也许应该是

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

当您像这样导入时，您可以根据需要为导入的变量命名，因此CaseStudyItem组件创建者实际上是CaseStudyList组件创建者。

添加组件时React Maximum Callstack

1 个答案: