需要在 react-apollo 中使用从 GraphQL 订阅接收到的数据的 setstate()

Question

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

我已经尝试了很多方法让它工作，例如 SubscribetoMore react-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
    }
  }`;

Answer 1

在你的情况下你不需要有 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>
      );

你必须在没有这个的情况下在你的组件中调用 haveAnyFish 函数所以在上面的代码更改之后你需要使用 this.haveAnyFish

调用 haveAnyFish 函数

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

需要在 react-apollo 中使用从 GraphQL 订阅接收到的数据的 setstate()

Need to use setstate() of data received from GraphQL subscription in react-apollo

javascript

reactjs

graphql

react-apollo

graphql-subscriptions