流星+反应”;未捕获的类型错误:无法读取属性'数据'“未定义”;

meteor + react "Uncaught TypeError: Cannot read property 'data' of undefined"

本文关键字：未定义 读取 属性 数据 错误 反应 流星 类型      更新时间：2023-09-26

Im使用Meteor+React，"this.props.thing.source"是mongodb_id的字符串。

"findOne（）"函数是Meteor的函数之一。正如你所看到的，当我传入ID本身的字符串时，它工作得很好，但当传入变量时，我会得到一个未定义的错误，即使该变量呈现出相同的字符串。

在此代码中：

Thing = React.createClass({
  propTypes: {
    thing: React.PropTypes.object.isRequired
  },
  render() {
    return (
      <ul>
        <li>Display: {Things.findOne(this.props.thing.source).data}</li>
        <li>Display: {Things.findOne("emq6M4WbJeRvkA6Q3").data}</li>
        <li>Source: {this.props.thing.source}</li>
      </ul>
    );
  }
});

这不起作用：

  • 显示：｛Things.findOne（this.props.thing.source）.data｝

    • 这是有效的：

  • 显示：｛Things.findOne（"emq6M4WbJeRvkA6Q3"）.data｝

    • 这正确地呈现了"emq6M4WbJeRvkA6Q3"：

  • 来源：｛this.props.thing.Source｝

    • 我得到的错误：

    "未捕获类型错误：无法读取未定义"的属性"data"

    由于Things.findOne()返回的是undefined，所以您会得到错误。

    您说用this.props.thing.source调用上面的函数不起作用，这是错误的，但由于您没有提到Thing组件的渲染是如何发生的，因此查找错误的最佳方法是传递道具this.props.thing.source/传递给组件的内容。

    我做了一个快速复制粘贴的例子，说明了你的组件在JSFiddle 中的工作

    var Things = {
    findOne: function (thingSource) {
        if (thingSource) {
            return {
                data: 'It did work!'
            };
        }
        return undefined;
    }
}
var Thing = React.createClass({
    propTypes: {
        thing: React.PropTypes.object.isRequired
    },
    render: function() {
        return <div>Hello {Things.findOne(this.props.thing.source).data}</div>;
    }
});
React.render(<Hello thing={{source: true}} />, document.body);

    您的确切组件的工作示例可以在这里找到

    相关文章：