如何修復舊版上下文 API 已在 react js 的嚴格模式樹中檢測到

Question

我嘗試使用 react.strict 模式，但警告仍然出現在 console.log chrome 瀏覽器上這對我來說太煩人了

像這樣的消息：舊的 API 將在所有 16.x 版本中得到支持，但使用它的應用程序應該遷移到新版本。

import React, { Component } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
import axios from 'axios';
import Navigation from './partials/navbar'

class Index extends Component {
    state = { 
        list: []
     }

    componentDidMount = () => {
        axios.get('http://localhost:4230/').then(res => console.log(res.data) ).catch( err => console.log())
    }

    render() { 
        return (
        <React.Fragment>
            <Navigation />
            <h1 className="display-4 text-center mt-5" style={{fontSize: '3vw'}}>Welcome Admin</h1>
            <div className="container">
                <ListGroup>
                    <ListGroupItem active>List employee Name</ListGroupItem>
                    <ListGroupItem tag="a" href="#" action>Hello this is danill</ListGroupItem>
                    <ListGroupItem tag="a" href="#" action>daddsss</ListGroupItem>
                    <ListGroupItem tag="a" href="#" action>dsadsadda</ListGroupItem>
                </ListGroup>
            </div>
        </React.Fragment> 
        );
    }
}
 
export default Index;

Answer 1

您使用的舊版上下文 API https://reactjs.org/docs/legacy-context.html

使用新的上下文 API 代替參見https://reactjs.org/docs/context.html

Answer 2

對我來說，當我使用以下命令嘗試監聽 graphQl 訂閱時發生此錯誤：

• 客戶端： import { ApolloProvider } from "react-apollo";
• 服務器端： const { SubscriptionServer } = require("subscriptions-transport-ws");

所以我開始將我的前端從react-apollo更改為新的@apollo/client ；

帶有react-apollo 的舊 graphQL 客戶端

import React from "react";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";

import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";
import { split } from "apollo-link";

import { ApolloProvider } from "react-apollo";
import SubComp from "./Subscriptions";

/**
 * uses `react-apollo` !!!
 */

const LOCAL_ENDPOINT = "localhost:4000/graphql";

const PubSub = (props) => {
  const { refetchCall = () => {} } = props;

  const httpLink = new HttpLink({
    uri: `http://${LOCAL_ENDPOINT}`,
  });
  const wsLink = new WebSocketLink({
    uri: `ws://${LOCAL_ENDPOINT}`,
    options: {
      reconnect: true,
    },
  });
  const link = split(
    // split based on operation type
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === "OperationDefinition" && operation === "subscription";
    },
    wsLink,
    httpLink
  );
  const client = new ApolloClient({
    link,
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <SubComp refetchNow={refetchCall} />
    </ApolloProvider>
  );
};

export default PubSub;

帶有@apollo/client的新 graphQL 客戶端

import React from "react";
import {
  split,
  HttpLink,
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { SubscriptionViaHook } from "./subscriptions";

import { SubscriptionClient } from "subscriptions-transport-ws";
import { WebSocketLink } from "@apollo/client/link/ws";

/**
 * wants to avoid using `react-apollo` !!!
 */

const LOCAL_ENDPOINT = "localhost:4000/graphql";

const PubSubWHooks = (props) => {
  const httpLink = new HttpLink({
    uri: `http://${LOCAL_ENDPOINT}`,
  });

  const wsLink = new WebSocketLink(
    new SubscriptionClient(`ws://${LOCAL_ENDPOINT}`, {
      options: {
        reconnect: true,
      },
    })
  );

  const splitLink = split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === "OperationDefinition" && operation === "subscription";
    },
    wsLink,
    httpLink
  );

  const client = new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <SubscriptionViaHook />
    </ApolloProvider>
  );
};

export default PubSubWHooks;