Javascript 试图更新已卸载的组件时出错？

我正在使用react meteor从mongodb收集中获取数据。我正在将

加载

作为道具传递给功能组件<代码>加载是bool值，当准备获取整个数据时，该值为真。我想在网页上显示JSON响应的内容，但我得到了一个错误：试图更新已经卸载的组件

代码：

import React，{Component}来自“React”；
从“流星/流星”中导入{Meteor}；
从“流星/反应流星数据”导入{withTracker}；
常量头=（{allnavitems，loading}）=>{
如果（装载）{
让navlist=allnavitems；
console.log（navlist.length）；
console.log（导航列表[0]）；
返回(
{navlist[0]}
);
}
};
使用跟踪器导出默认值（参数=>{
const navitems=Meteor.subscribe（“联盟导航栏”）；
返回{
正在加载：navitems.ready（），
AllNaviItems:NavigationItems.find（）.fetch（）
};
})（标题）；

我尝试了上面的代码，但它给出了错误。可能的原因是什么？在控制台中，我得到一个错误：试图更新已经卸载的组件

如果我将上面的标题组件更改为下面的，那么我只能看到加载。。在网页上，但在获取数据（即加载为真）后，应显示navlist[0]

const Header = ({allnavitems, loading}) => {

    if(loading){
        let navlist = allnavitems

        console.log(navlist.length)
        console.log(navlist[0])

    return(
        <div>
            <h3>{navlist[0]}</h3>         
        </div>
    )

    }else{
        return(
        <div><p>Loading...</p>
        </div>
        )
    }

}

const头=（{allnavitems，loading}）=>{
如果（装载）{
让navlist=allnavitems
console.log（navlist.length）
console.log（导航列表[0]）
返回(
{navlist[0]}
)
}否则{
返回(
加载

)
}
}

截图：

---

不能使用react渲染对象。您可能希望通过解包您关心的每个项目属性来映射导航项目，并为每个项目呈现链接或类似的内容：

const Header = ({ allnavitems, loading }) => {
    if (loading) return <div><p>Loading...</p></div>

    return (
      <div>
        {allnavitems.map(({heading, url}) => <a href={url}>{heading}</a>}
      </div>
    );
  }
};

export default withTracker(params => {
  const navitems = Meteor.subscribe("league_navbar", "");

  return {
    loading: !navitems.ready(), // it makes more sense to invert it because loading means that the items are *not* ready
    allnavitems: NavigationItems.find().fetch()
  };
})(Header);

const头=（{allnavitems，loading}）=>{
如果（加载）返回加载

返回(
{allnavitems.map（（{heading，url}）=>}
);
}
};
使用跟踪器导出默认值（参数=>{
const navitems=Meteor.subscribe（“联盟导航栏”）；
返回{
加载：！navitems.ready（），//将其反转更有意义，因为加载意味着项*未*就绪
AllNaviItems:NavigationItems.find（）.fetch（）
};
})（标题）；

请将错误消息及其堆栈跟踪显示给我们。@trixn检查屏幕截图question@trixn如果我删除

return（）

从功能组件中，我可以看到整个数据，但我也希望在加载为真时，即在获取整个数据后显示内容。我是否应该创建

类

组件而不是功能组件。如果

加载

为

假

，则

标题

组件不会返回任何内容。

React

组件必须始终返回某些内容，即使它是

null

。不，这没有什么区别。函数组件是呈现函数。如果基于类的组件没有状态，只有一个

render（）

function这相当于一个功能组件。有一件事我无法理解为什么将加载更改为加载：！navitems.ready（）。为什么！navitems.ready（）有效，为什么navitems.ready（）无效？你能在回答中回答吗

const Header = ({ allnavitems, loading }) => {
    if (loading) return <div><p>Loading...</p></div>

    return (
      <div>
        {allnavitems.map(({heading, url}) => <a href={url}>{heading}</a>}
      </div>
    );
  }
};

export default withTracker(params => {
  const navitems = Meteor.subscribe("league_navbar", "");

  return {
    loading: !navitems.ready(), // it makes more sense to invert it because loading means that the items are *not* ready
    allnavitems: NavigationItems.find().fetch()
  };
})(Header);