如何在React组件中使用Meteor.call调用post.get方法的返回值？

我来帮你搞定这个问题！你遇到的核心问题是异步回调里的this指向不对，而且return result在异步回调里根本没法把值传递出去——毕竟Meteor.call是异步执行的，componentDidMount不会等它完成就继续往下走了。

下面是修改后的完整方案，一步步来：

第一步：给组件初始化状态 #

首先在组件的构造函数里初始化状态，用来存储我们获取到的帖子数据：

export default class PostEdit extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态，因为你的Meteor方法返回的是数组，我们可以先存空数组，或者直接存单个帖子对象
    this.state = {
      post: null,
      error: null
    };
  }

  // ... 其他方法
}

第二步：修正Meteor.call的回调，正确更新状态 #

在componentDidMount里，我们需要确保回调函数里的this指向组件实例，这里最方便的方式是用箭头函数（箭头函数会继承外层作用域的this），然后在回调里用this.setState把结果存到状态中：

componentDidMount() {
  const postId = route.current().params._id;
  Meteor.call("post.get", postId, (error, result) => {
    if (error) {
      console.error("获取帖子失败:", error);
      this.setState({ error: error.message });
    } else {
      // 因为你的方法返回的是数组，取第一个元素（按_id查应该只有一个结果）
      this.setState({ post: result[0] });
    }
  });
}

第三步：根据状态渲染内容 #

现在状态里有了帖子数据，就可以把它传给你的RenderEditPost组件，或者直接在当前组件里渲染：

render() {
  const { post, error } = this.state;

  // 如果有错误，显示错误信息
  if (error) {
    return <div className="error">错误：{error}</div>;
  }

  // 如果还没获取到数据，显示加载状态
  if (!post) {
    return <div>加载中...</div>;
  }

  // 数据就绪，传递给子组件
  return (
    <div>
      <RenderEditPost post={post} />
    </div>
  );
}

优化你的Meteor方法 #

另外，因为你是按_id查询帖子，用findOne比find().fetch()更合适——直接返回单个对象，不用再取数组的第一个元素：

Meteor.methods({
  "post.get": function(_id) {
    // 直接返回单个帖子对象
    return Posts.findOne({ _id: _id });
  }
});

这样修改后，React组件里的回调就可以直接写this.setState({ post: result })，不用再处理数组了。

为什么你之前的方法无效？ #

• 你用的是普通函数作为回调，里面的this默认不是组件实例，所以直接调用this.setState会报错（如果没绑定的话）。
• return result在异步回调里没有意义，因为componentDidMount已经执行完了，这个return的值根本不会被任何地方接收。

内容的提问来源于stack exchange，提问作者cotrutatiberiu