Reactjs Apollo查询组件返回结果后分派redux操作

用老办法：

graphql(GET_PROJECTS_BY_USER_ID, {
    options: ownProps => ({
        skip: !ownProps.loggedUser.id,
    }),
    props: ({ data }) => {
        return data;
    },
});

我可以捕获

组件willreceiveprops

生命周期中的项目列表，并在那里发送redux操作：

componentWillReceiveProps(nextProps) {
    if (!nextProps.loading && this.props.loading) {
        this.props.setProjects(nextProps.getProjects);
    }
}

现在我正在试用Apollo的

组件，但我不知道如何正确地分派操作：

render() {
    return (
        <Query
            query={GET_PROJECTS_BY_USER_ID}
            skip={!this.props.loggedUserId}
        >
            {({ loading, data: { getProjects: projects } }) => {
                if (loading) return 'Loading ...';

                this.props.setProjects(projects); // no good

                // return projects
            }}
        </Query>
    );
}

render（）{
返回(
{（{加载，数据：{getProjects:projects}}}）=>{
如果（加载）返回“加载…”；
this.props.setProjects（projects）；//不好
//返回项目
}}
);
}

这将导致以下警告：

无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

componentWillMount

---

问题是，通过使用

，

组件将不再被调用。

新的

查询

组件使用该模式。作为组件的子级传入的函数在

Query

的render方法中调用，这意味着您无权访问函数中该组件的任何其他生命周期方法。为了解决这个问题，您必须创建一个额外的组件来实现所需的生命周期方法。只有一种方法可以做到这一点：

class DoSomethingOnce extends Component {
  componentWillMount () {
    this.props.action()
  }
  render () {
    return this.props.children || null
  }
}

<Query
  query={GET_PROJECTS_BY_USER_ID}
  skip={!this.props.loggedUserId}
>
  {({ loading, data: { getProjects: projects } }) => {
    if (loading) return 'Loading ...';
    <DoSomethingOnce action={() => setProjects(projects)}>
      // whatever else you're going to render
    </DoSomethingOnce>
  }}
</Query>

类DoSomethingOnce扩展组件{
组件将安装（）{
this.props.action（）
}
渲染（）{
返回此.props.children | | null
}
}
{（{加载，数据：{getProjects:projects}}}）=>{
如果（加载）返回“加载…”；
setProjects（项目）}>
//不管你要渲染什么
}}

或者，使用

componentDidMount

的组件可以只执行所有渲染，而不是将责任推给其子组件。您也可以始终使用类似的库

---

这与您使用

graphql

HOC时没有什么不同——您仍然需要将HOC包装在实现

componentDidMount

的组件上，谢谢！我想我会坚持下去。