reactjs - 类型 'any' 的参数不可分配给类型 'never'

Question

我正在从端点获取图像，但在将每个映射文件推送到本地数组时遇到问题。我收到错误类型“any”的参数无法分配给类型“never”。

• 我尝试将所有参数设置为 blob，但没有成功。
• 尝试将function(data)设置为data:any、data:{}、data:File[]、data: JSON 等都说 map 功能不适用于这些类型。
• 我认为问题可能出在我的 state.mediaLibrary 中。也许这就是我需要分配数组类型的地方？

import * as React from "react"
import { Company } from "data/companies"
import { Asset } from "data/companies"

interface MediaLibraryProps {
  company: Company
}

class MediaLibrary extends React.Component<MediaLibraryProps> {
  state = {
    mediaLibrary: []
  }

  getMediaLibrary = async () => {
    await fetch(
      `${process.env.REACT_APP_SA_API_URL}/${this.props.company.id}/medialibrary`,
    ).then(blob => blob.json())
      .then(function (data) {
        return data.map((file: Asset) => {
          return {
            id: file.assetId,
            path: file.path
          }
        })
      }).then(data => this.state.mediaLibrary.push(...data))
  }

  public render() {
    const files = this.state.mediaLibrary.map((file: Asset) => (
      <div key={file.assetId}>
        <div>
          <img src={`url(${process.env.REACT_APP_SA_CDN_URL}${file.path})`} />
        </div>
      </div>
    ))

    return (
      <div>
        <div>
          <h2>Media Library</h2>
          {files}
          <button onClick={this.getMediaLibrary}>Get Files</button>
        </div>
      </div>
    )
  }
}

export default MediaLibrary

• 预计状态数组将填充许多图像文件。
• 实际结果是 TypeScript 正在提示。

重要提示:解决此问题后，我发现我的问题不在于状态。尽管该解决方案允许我将对象插入数组，但我直接改变了状态，这在 React 中是不可行的。见下文:

class MediaLibrary extends React.Component<MediaLibraryProps> {
  state = {
    mediaLibrary: []
  }

  getMediaLibrary = async () => {
    await fetch(
      `${process.env.REACT_APP_SA_API_URL}/${this.props.company.id}/medialibrary`
      }
    ).then(blob => blob.json())
      .then(function (data: any) {
        return data.map((file: Asset) => Object.assign(file, {
          assetId: file.assetId,
          path: file.path
        }))
      }).then((data) => this.setState({ mediaLibrary: [...data] }))
  }

Answer 1

您应该像这样声明您的 mediaLibrary 数组:

state = {
  mediaLibrary: Array<{id: string, path: string}>()
}

或者像这样:

state: {
  mediaLibrary: {id: string, path: string}[]
} = {
  mediaLibrary: []
}

通过第一种方式，您可以告诉 TypeScript 您希望将具有给定属性的对象放入 mediaLibrary 数组中。仅使用 [] TypeScript 会将 never 类型放入数组中，因此无法将任何内容放入其中。

第二个示例描述了完整的state对象，而不仅仅是包含的数组。