Question

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

我已经尝试了许多方法使其工作，例如react-apollo的SubscribetoMore端点，但是我认为我为此编写了错误的react代码。

/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（）

1 个答案: