流星+反应“未定义的TypeError:无法读取未定义的属性‘数据’

Question

我正在使用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}

​

我正在收到的错误：

“未定义TypeError:无法读取未定义的属性‘数据’”

Answer 1

您将得到错误，因为无论Things.findOne()返回什么都是undefined。

您说用this.props.thing.source调用上面的函数不起作用，这是错误的，但是由于您没有提到Thing组件的呈现是如何发生的，您找到错误的最佳选择是将传递给组件的支柱this.props.thing.source/what的方式。

我制作了一个快速复制粘贴示例，说明了组件在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);

使用确切组件的工作示例可以是在这里发现的。