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

Question

我是Typescript 。 使用 Nextjs，我有一个基本组件要进行类型检查，但是出现错误。 如何对我的对象数组进行类型检查？

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>;
};

成分：

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

您已经在swc类中定义了props对象，无需销毁类本身。

当您应该访问swc.props.swc.results时，您实际上是在尝试访问swc.props.results

---

但总的来说，这似乎是一个不正确的组件设置，我对您的props定义感到困惑，因为您似乎将results prop 然后swc传递给 props，这是组件本身（？）

如果没有进一步的细节，我很难回答这个问题，但我想你会想要做这样的事情：

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