Question

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;

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

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

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

type IProps = {
}

const ChartContainer: React.FunctionComponent<IState & IProps>

Answer 1

问题来自E，因为您似乎不了解什么是类型。这里定义了一个名为 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 = () =>

tl;博士

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

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

const ChartContainer: React.FC<...your type...> = () =>

然后在代码中的某个地方

type user = {
  name: string
  surname: string
}

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

1 个答案: