Question

在apollo-client更新后，我无法向父组件发送道具。我的工作是

  <Query query={GET_DOG_PHOTO} variables={{ breed }}>
   {({ loading, error, data }) => {
  if (loading) return null;
  if (error) return `Error!: ${error}`;

  return (
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
  );
}}

我需要在查询完成后发送一个函数

有什么想法吗？

Answer 1

这里是react-apollo中的一个github问题，要求能够将回调传递给查询：https://github.com/apollographql/react-apollo/issues/208

问题中的解决方法基本上是使用componentWillReceiveProps（componentDidUpdate可能就是你现在使用的，或者如果你只是想设置状态，则可以使用getDerivedStateFromProps）。有点烦人，因为你必须通过作为道具传递查询加载值，这样你才能进入生命周期。像这样的东西

<Query query={GET_DOG_PHOTO} variables={{ breed }}>
  {({ loading, error, data }) => (
    <LifecycleComp loading={loading} error={error} data={data} />
  )}
</Query>

class LifecycleComp extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.loading && !this.props.loading) {
      // perform callback
    }
  }

  render() {
    if (loading) return null;
    if (error) return `Error!: ${error}`;

    return (
      <img ... /> 
    )
  }
}

在apollo查询后发送道具

1 个答案: