打字稿错误属性 x 在类型“只读”上不存在<Props> &amp; Readonly&lt;{ children?: ReactNode; }&gt;&#39;

Question

I am new to Typescript . Using Nextjs, I have a basic component I would like to typecheck, however I am getting the error. How can i typecheck my array of objects?

ERROR in C:/Users/Matt/sites/shell/pages/index.tsx(22,4):
22:4 Property 'swc' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
    20 |        render() {
    21 |                const {
    22 |                        swc: { results }
       |                        ^
    23 |                } = this.props;

type Props = {
    results: Array<any>;
};

Component:

interface Props {
    swc: Object;
    results: Array<any>;
}
class swc extends React.Component<Props, {}> {
    static async getInitialProps() {
        const res = await fetch("https://swapi.co/api/people/");
        const swc = await res.json();

        return {
            swc
        };
    }

    render() {
        const {
            swc: { results }
        } = this.props;

        return results.map(swc => (
            <Layout>
    ...
            </Layout>
        ));
    }
}

export default swc;

this.props:

 { swc:
   { count: 87,
     next: 'https://swapi.co/api/people/?page=2',
     previous: null,
     results:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  url:
   { query: [Getter],
     pathname: [Getter],
     asPath: [Getter],
     back: [Function: back],
     push: [Function: push],
     pushTo: [Function: pushTo],
     replace: [Function: replace],
     replaceTo: [Function: replaceTo] } }

Answer 1

You already have the props object defined inside the swc class, no need to destruct the class itself.

You're essentially trying to access swc.props.swc.results when you should be accessing swc.props.results instead

---

In general though, this seems like an incorrect component set up and I'm confused by your props definition as you seem to be passing results prop and then swc to props, which is the component itself (?)

It's hard for me to answer this without further detail, but I'd imagine you'd want to do something like this:

import React, { Component } from 'react'
import fetch from 'isomorphic-unfetch'

type Props = {
   results: any[], // < try to be more specific than any[]
}

// React Components should per convention start with Uppercase
class Swc extends Component<Props, {}> {
  static async getInitialProps(ctx) {
     const res = await fetch("https://swapi.co/api/people/")
     const json = await res.json()
     return { json.swc.results }
  }

  render() {
     const { results } = this.props
     // React components should always return a singular tag 
     // (eg. div, React.Fragment, but not array of <Layout>
     const renderResults = results && results.map(result => (
         <Layout>
            {result}
         </Layout>
     ))

      return (
        <>
          {renderResults}
        </>
      )

  }
}

export default Swc