类型“{}”缺少“IState”类型的以下属性：答案

【问题标题】：Type '{}' is missing the following properties from type 'IState':类型“{}”缺少“IState”类型的以下属性：
【发布时间】：2021-06-23 05:49:41
【问题描述】：

import ChartContainer from "./Chart/ChartContainer";
import "./App.css";

function App() {

  return <ChartContainer />;
}

export default App;

chartcontainer 组件有状态接口，为什么要期待 props？

// @ts-ignore
import axios from 'axios';
import React from 'react';
import Canvas from "./Canvas"
import { convertData } from "./Helpers"
type IState = {
  data: unknown;
  prevMonthStam: number;
}

const ChartContainer: React.FunctionComponent<IState> = () => {
  const [data, setData] = React.useState<unknown>([])
  const [prevMonthStamp, setPrevMonthStamp] = React.useState<number>()

  React.useEffect(() => {
    var d: any = new Date();
    d.setMonth(d.getMonth() - 2);
    d.setHours(0, 0, 0, 0);
    setPrevMonthStamp((d / 1000 | 0) * 1000); //timestamp of a month ago
  }, [])


  React.useEffect(() => {
    axios({
      method: 'get',
      url: 'http://binance.com/api/v3/klines?symbol=BTCUSDT&interval=1d'
    }).then(res => {
      if (prevMonthStamp) {
        setData(res.data.filter((i: number[]) => i[0] >= prevMonthStamp))
      }
    }).catch(err => {
      console.log(err)
    })
  }, [prevMonthStamp])


  if (Array.isArray(data) && data?.length > 0) {
    return (
      <Canvas data={convertData(data)} />
    );
  } else {
    return null
  }

}
export default ChartContainer;

在这种情况下如何区分接口的道具和状态？这也行不通，我定义了一个空的道具接口，它仍然在问同样的问题

指出它曾经以这种方式工作，直到我重新启动 ide

type IState = {
  data: unknown;
  prevMonthStam: number;
}

type IProps = {
}

const ChartContainer: React.FunctionComponent<IState & IProps>

【问题讨论】：

const ChartContainer: React.FunctionComponent<IState> = () => 你是说ChartContainer 的类型是React.FunctionComponent，它会传入IState 类型定义的道具。现在，您的组件收到了此处定义的 0 个道具 = () =>。一个简单的= (props) => 应该可以解决它。但是，为什么你甚至不使用道具data 或prevMonthStam 时还要设置道具类型？此外，IProps 或 IState 只是一个名称，没有任何意义。它不是state 或props，它基本上是组件属性的结构
@Lith 好吧，我明白我没有道具。但我有两种状态。那些也不应该在接口中定义吗？这就是我想要做的。我不能为 props 定义一个接口，为 state 定义另一个接口吗？
类型或接口不用于此。我很快就会发布一个答案试图解释。

标签： reactjs typescript

【解决方案1】：

问题来自const ChartContainer: React.FunctionComponent<IState> = () =>因为您似乎不了解类型是什么。这里定义了一个名为ChartContainer 的常量，他的类型是React.FunctionComponent。作为一个反应组件，它自己可以有属性，你用IState定义了这些属性。这不是变量的状态或结构。它是在初始化组件时可以或必须通过属性将哪些属性传递给组件的结构或定义。

在这种情况下你需要做const ChartContainer: React.FunctionComponent<IState> = (props) =>来解决这个错误。但它远非完美。

您现在的设置方式意味着prevMonthStamp 和data 将来自父组件，例如<ChartContainer data={... some data...} prevMonthStamp={...some data...} />。但是在您的情况下，您在组件内创建两个变量，并且不使用从父级传递的外部属性

const [data, setData] = React.useState<unknown>([])
const [prevMonthStamp, setPrevMonthStamp] = React.useState<number>()

因为你甚至不需要属性，你应该把它留空const ChartContainer: React.FunctionComponent = () =>

另外，建议改用const ChartContainer: React.FC = () =>。写的少，结果一样。

并传递一个属性结构const ChartContainer: React.FC<...your type...> = () =>

tl;博士

类型可以任意命名，只是一个定义或结构，您在初始化时将外部变量作为属性传递给组件，而不是组件状态、变量或其他任何结构的结构。

附言类型也可以用于像这样的变量

type user = {
  name: string
  surname: string
}

然后在代码中的某处

const user: user = {name: "Lith", surname: "Lithium"}

【讨论】：

Okey，所以 tldr 仅用于 props 的接口。