0

我正在尝试通过 react-apollo 设置我正在执行的 GraphQL 订阅查询的 setState()。我的目的是将我从 GraphQL 收到的完整对象存储起来，并将其保存到ComponentDidMount()App.js 文件的方法中的状态中。

我已经尝试了很多方法让它工作，比如SubscribetoMorereact-apollo 的端点，但我认为我正在为它编写错误的反应代码。

/App.js

const haveAnyFish = () => (
    <Subscription subscription={gql`${SUBSCRIPTION_SYNC}`} >
{({ loading, error, data }) => {
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :</p>;
  return (
    <div>
      <div>{fishes(data)}</div>
    </div>
  );
}}
</Subscription>
);

/App.js

class App extends React.Component {
    state = {
      fishes: {},
      order: {}
    };
componentDidMount() {
    const fishes = (data) => {
        this.setState({ fishes: data });
    }
  }

订阅查询

const SUBSCRIPTION_SYNC = `
    subscription syncState{
      cotd {
      _id_2
      name
      desc
      image
      price
      status
    }
  }`;
4

1 回答 1

0

您不需要 componentDidMount 在您的情况下。您在 componentDidMount 方法中定义了函数，并且无法在外部访问

改变

   componentDidMount() {
        const fishes = (data) => {
            this.setState({ fishes: data });
        }
    }

至

  fishes = data => {
        this.setState({ fishes: data });
  }

和改变

    const haveAnyFish = () => (
        <Subscription subscription={gql`${SUBSCRIPTION_SYNC}`} >
          {({ loading, error, data }) => {
              if (loading) return <p>Loading...</p>;
              if (error) return <p>Error :</p>;
           return (
             <div>
                <div>{this.fishes(data)}</div>
                </div>
             );
           }}
         </Subscription>
        );

至

     haveAnyFish = () => (
          <Subscription subscription={gql`${SUBSCRIPTION_SYNC}`} >
         {({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error :</p>;
             return (
                <div>
                  <div>{this.fishes(data)}</div>
                </div>
              );
           }}
        </Subscription>
      );

您必须在没有 this 的情况下在组件中调用 haveAnyFish 函数，因此在上述代码更改后，您需要使用 this.haveAnyFish 调用 haveAnyFish 函数

另请注意，每当您在组件内创建函数时，它们不需要在函数之前使用 const，如果您想访问这些函数内的状态或道具，您需要手动绑定它们或将它们更改为箭头函数

于 2019-01-05T07:15:43.447 回答