Javascript 无法读取未定义的React graphql的属性“props”

我正在学习traversery media的graphql教程，并尝试从spaceX api构建一个小型只读应用程序。所有其他事情都很好，但是当我尝试实现他教程中的代码时，我遇到了麻烦。如果有人读了这篇文章，请对代码进行比较，因为我是初学者，事情可能已经改变了。我将把他的一段代码和我的一段代码放在一起，向读者展示两者的确切区别。 他的APP.js是

import React, { Component } from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Launches from './components/Launches';
import Launch from './components/Launch';
import './App.css';
import logo from './logo.png';

const client = new ApolloClient({
uri: 'http://localhost:5000/graphql'
});

class App extends Component {
render() {
return (
  <ApolloProvider client={client}>
    <Router>
      <div className="container">
        <img
          src={logo}
          alt="SpaceX"
          style={{ width: 300, display: 'block', margin: 'auto' }}
        />
        <Route exact path="/" component={Launches} />
        <Route exact path="/launch/:flight_number" component={Launch} />
      </div>
    </Router>
  </ApolloProvider>
);
}
}

export default App;

还有他的午餐

import React, { Component, Fragment } from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { Link } from 'react-router-dom';
import classNames from 'classnames';

const LAUNCH_QUERY = gql`
query LaunchQuery($flight_number: Int!) {
launch(flight_number: $flight_number) {
  flight_number
  mission_name
  launch_year
  launch_success
  launch_date_local
  rocket {
    rocket_id
    rocket_name
    rocket_type
  }
}
}
`  ;

export class Launch extends Component {
 render() {
 let { flight_number } = this.props.match.params;
  flight_number = parseInt(flight_number);
 return (
  <Fragment>
    <Query query={LAUNCH_QUERY} variables={{ flight_number }}>
      {({ loading, error, data }) => {
        if (loading) return <h4>Loading...</h4>;
        if (error) console.log(error);

        const {
          mission_name,
          flight_number,
          launch_year,
          launch_success,
          rocket: { rocket_id, rocket_name, rocket_type }
        } = data.launch;

        return (
          <div>
            <h1 className="display-4 my-3">
              <span className="text-dark">Mission:</span> {mission_name}
            </h1>
            <h4 className="mb-3">Launch Details</h4>
            <ul className="list-group">
              <li className="list-group-item">
                Flight Number: {flight_number}
              </li>
              <li className="list-group-item">
                Launch Year: {launch_year}
              </li>
              <li className="list-group-item">
                Launch Successful:{' '}
                <span
                  className={classNames({
                    'text-success': launch_success,
                    'text-danger': !launch_success
                  })}
                >
                  {launch_success ? 'Yes' : 'No'}
                </span>
              </li>
            </ul>

            <h4 className="my-3">Rocket Details</h4>
            <ul className="list-group">
              <li className="list-group-item">Rocket ID: {rocket_id}</li>
              <li className="list-group-item">
                Rocket Name: {rocket_name}
              </li>
              <li className="list-group-item">
                Rocket Type: {rocket_type}
              </li>
            </ul>
            <hr />
            <Link to="/" className="btn btn-secondary">
              Back
            </Link>
          </div>
        );
      }}
    </Query>
    </Fragment>
  );
  }
 }

export default Launch;

我的App.js是

import { ApolloProvider } from '@apollo/client/react';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Launches from './components/Lanches';
import Launch from './components/Launch';
import logo from './logo.png';
import './App.css';


const client = new ApolloClient({
uri: 'http://localhost:5000/graphql',
cache: new InMemoryCache()
});

function App() {
return (
<ApolloProvider client={client}>
  <Router>
    <div className="container">
      <img
        src={logo}
        alt="SpaceX"
        style={{ width: 300, display: 'block', margin: 'auto' }}
      />
      <Route exact path="/" component={Launches} />
      <Route exact path="/launch/:flight_number" component={Launch} />


    </div>
  </Router>
  </ApolloProvider>
 );
 }

 export default App;

Mine Launch.js

import React, { Fragment } from 'react';
import { useQuery,gql } from '@apollo/client';
import {Link} from 'react-router-dom';
import classNames from 'classnames';

const LAUNCH_QUERY =gql`
query LaunchQuery($flight_number: Int) {
launch(flight_number: $flight_number) {
  flight_number
  mission_name
  launch_year
  launch_success
  launch_date_local
  rocket {
    rocket_id
    rocket_name
    rocket_type
  }
}
}
`;


const Launch = () => {
let {flight_number} = this.props.match.params;
const { loading, error, data } = useQuery(LAUNCH_QUERY, {variables:{flight_number}});

if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
console.log(error)
  console.log(data)

return (

 <div>
   {data}
 </div>
);
}


export default Launch;

但是当我执行let{flight_number=this.props.match.params}

它显示未定义并给出错误 TypeError:无法读取未定义的属性“props”

---

PS：我是一名初学者，如果有人能告诉我我必须做什么，我将不胜感激。

您的问题与类与功能组件有关，您的启动组件it功能性，而his是类。功能组件中没有此关键字

如果您想访问功能组件中的道具，您需要将它们作为参数传递，但是由于您遵循的是教程，您可能应该重构代码以使用类

---

如果你想阅读更多内容，这里有一个博客：

FCReadIt中没有这一点，请自己阅读。。。建议对类进行重构是完全错误的，明确定义/传递道具就足够了。。。您可以自由混合类和FC。。。不推荐使用呈现查询组件谢谢。是的，我知道我做错了什么。