代码之家 › 专栏 › 技术社区 › stone rock

试图更新已卸载的组件时出现获取错误?

reactjs javascript

-2

stone rock · 技术社区 · 6 年前

我正在使用react meteor从mongodb集合获取数据。我正在经过 loading 作为功能组件的支柱。 加载 是bool值,当整个数据准备好获取时为true。我想在网页上显示来自JSON响应的内容,但是我得到了一个错误:试图更新已经卸载的组件。

代码:

import React, { Component } from "react";
import { Meteor } from "meteor/meteor";
import { withTracker } from "meteor/react-meteor-data";

const Header = ({ allnavitems, loading }) => {
  if (loading) {
    let navlist = allnavitems;

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

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

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

  return {
    loading: navitems.ready(),
    allnavitems: NavigationItems.find().fetch()
  };
})(Header);

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

如果我将上面的标题组件改为下面的,那么我只能看到正在加载。。在网页上,但在获取数据后(即加载为真)应显示导航列表[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>
        )
    }

}

截图:

1 回复 | 直到 6 年前

trixn 6 年前

不能使用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);