Question

我已经使用Apollo创建了一个React组件，目前我使用render函数在数据加载后执行重定向，但是我收到警告：Warning: Cannot update during an existing state transition (such as within render ). Render methods should be a pure function of props and state.

这是我的代码： https://gist.github.com/jmn/c3f7c4489cd5f759808a62b48352ce87

重定向部分：

render() {
    return (
      <Query query={Q} variables={{ cursor: this.props.match.params.id }}>
      {({ loading, error, data, fetchMore }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;
        if (!this.props.match.params.id) {
          this.props.history.push(
            "/post/" + data.allPosts.pageInfo.endCursor
          );
        }
        return (
          <div></div>
        )

如何在惯用的React代码中执行此操作并避免出现任何警告？

Answer 1

虽然我不太确定，但您似乎正在使用React Router v4。如React Router docs

中所示

历史是可变的

这就是为什么调用this.props.history.push()导致上述错误的原因。相反，要使历史道具发生变化，请考虑使用<Redirect />组件，如下所示：

if (!this.props.match.params.id) {
   return <Redirect to={"/post/" + data.allPosts.pageInfo.endCursor}
}

有关<Redirect />的更多信息，请参见here

何时以及如何使用Apollo Client和React Router进行重定向

1 个答案: