Javascript 类型“Readonly上不存在属性“products”

在@Lesiak请求时编辑：

这是我的电话

// @api/shopifyProducts.ts

import Client from 'shopify-buy'

const client = Client.buildClient({
  // TODO: add to dotenv
  domain: 'some-domain.myshopify.com',
  storefrontAccessToken: 'example-token-2597293846729587293875'
})

export const getProducts = async () => {
  try {
    const data = await client.product.fetchAll()
    const products = await data.map((item) => {
      return {
        title: item.title,
        description: item.description
        // images: item.images
      }
    })

    return products
  } catch (error) {
    throw new Error(`Product API fetch failed: ${error}`)
  }
}

我还对我的组件进行了如下重构：

import React, { Component } from 'react'
import { getProducts } from '@api/shopifyProducts'

class TheListProducts extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      products: null
    }
  }
  async componentDidMount() {
    this.setState({
      products: await getProducts()
    })
    console.log(this.state.products) ==> Error: Property 'products' does not exist on type 'Readonly<{}>'
  }

  render() {
    return <p>Hey</p>
  }
}

export default TheListProducts

interface Product {
  title: string
  description: string
  [key: string]: string | number | undefined | Function
}

以下是它在浏览器中的外观：

我可以阅读，我想我理解这个错误，但是我不知道该怎么做

如果有人能用通俗易懂的英语向我解释，那就太棒了

基于web研究，我尝试如下方式增强产品界面：

import React, { Component } from 'react'
import { getProducts } from '@api/shopifyProducts'

class TheListProducts extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      products: null
    }
  }
  async componentDidMount() {
    this.setState({
      products: await getProducts()
    })
    console.log(this.state.products) ==> Error: Property 'products' does not exist on type 'Readonly<{}>'
  }

  render() {
    return <p>Hey</p>
  }
}

export default TheListProducts

interface Product {
  title: string
  description: string
  [key: string]: string | number | undefined | Function
}

---

但这就像瞎了眼

如果使用类组件，则应定义状态和道具的类型：

class App extends React.Component<MyProps, MyState> {

---

您可以查看更多详细信息

您真的需要ListState.products中的索引器吗？是否有任何东西阻止您使用从GetProducts收到的数据类型我想我只是做了您所说的，但是我得到了以下错误：“Readonly”类型上不存在属性“products”。。我正在更新我的问题请显示您的getProducts FunctionalRight，在它上您需要两个泛型类型参数：案例中的属性为空，案例中的状态{products:Product[]}如果您查看我的初始问题部分-这正是我从一开始就做的