Question

我不知道是什么造成这种情况，它几乎每半秒发送一次新请求。我在想它是因为我在渲染方法中调用了我的动作，但它不是，试图在componentDidMount中调用它，结果相同。

以下是代码：

行动：

    export const getComments = () => dispatch => {
  dispatch({ 
    type: GET_COMMENTS
  })
  fetch(`${API_URL}/comments`,
  { method: 'GET', headers: {
      'content-type': 'application/json'
    }})
    .then((res) => res.json())
    .then((data) => dispatch({
      type: GET_COMMENTS_SUCCESS,
      payload: data
    }))
    .catch((err) => dispatch({
      type: GET_COMMENTS_FAILED,
      payload: err
    }))
}

由于我在调用注释操作之前需要加载post id，因此我将其放在render方法中：

 componentDidMount() {
    const { match: { params }, post} = this.props
      this.props.getPost(params.id);
  }


  render() {
    const { post, comments } = this.props;
    {post && this.props.getComments()}
    return <div>
     ...

这是路线：

router.get("/comments", (req, res) => {
  Comment.find({})
    .populate("author")
    .exec((err, comments) => {
      if (err) throw err;
      else {
        res.json(comments);
      }
    });
});

Answer 1

你的getComments（）函数在渲染过程中运行。操作中使用的调度导致重新渲染，导致getComments（）再次触发，产生无限循环。

而不是在render（）函数中获取注释，而应该在componentDidMount生命周期钩子中获取它们，然后在render函数中只显示props的注释;

Answer 2

getComments()正在调用http请求，因此应将其移至componentDidMount生命周期hoook。这应该有效：

componentDidMount() {
    const { match: { params } = this.props
      this.props.getPost(params.id);
      this.props.getComments()
  }


  render() {
    const { post, comments } = this.props;
    {post && comments}
    return <div>
     ...

组件安装完成后，将从props.match检索params并获取Post和Comments。然后使用redux，调度post和comments数据，并且可以在连接组件的render方法中访问。

在MERN堆栈应用程序中创建的无数http请求

2 个答案: