TS2322：类型 'BillingSummaryDTO[]' 不可分配给类型 'never'

Question

我使用 Recharts 创建了这张图表。我想用来自后端 API 调用的数据填充图表。我试过这个：

export default function Billing() {
  const [chartData, setChartData] = useState([]);
  const [ isLoading, setIsLoading ] = useState(true);

  useEffect(() => {
    getBillingSummary().then(r =>
      Reflect.ownKeys(data).forEach((data) => {
        chartData.push(
          [r.data];
          setIsLoading(false);
        );
      });
  }, []);

  return (
    <>
      <Grid container justifyContent="center" alignItems="center">
        <Grid item xs={11}>
          {/*Padding on the top*/}
          <Box m="5rem" />
        </Grid>

        <Grid item xs={12} >
          <h4 className="chart-label">Invoices Summary</h4>
          <BarChart
              width={500}
              height={300}
              data={chartData}

              margin={{
                top: 20,
                right: 30,
                left: 20,
                bottom: 5,
              }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="pv" stackId="a" fill="#8884d8" />
            <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
            <Bar dataKey="amt" stackId="a" fill="#E791CB" />
            <Bar dataKey="adt" stackId="a" fill="#71D3F8" />
          </BarChart>
        </Grid>
      </Grid>
    </>
  );
}

通过 API 调用我想生成存根条形图：

export async function getBillingSummary(): Promise<AxiosResponse<BillingSummaryDTO[]>> {
  return await axios.get<BillingSummaryDTO[]>(
      `${baseUrl}/management/billing/summary`
  );
}

export interface BillingSummaryDTO {
    paid?: number,
    outstanding?: number,
    pastDue?: number,
    cancelled?: number,
    createdAt?: Moment | null,
}

API调用响应：

[
    {
        "paid": 11,
        "outstanding": 32,
        "pastDue": 12,
        "cancelled": 6,
        "createdAt": "2022-02-01T00:00:00"
    },
    {
        "paid": 5,
        "outstanding": 5,
        "pastDue": 2,
        "cancelled": 5,
        "createdAt": "2022-01-02T00:00:00"
    },
    {
        "paid": 5,
        "outstanding": 4,
        "pastDue": 2,
        "cancelled": 4,
        "createdAt": "2021-12-12T00:00:00"
    },
    {
        "paid": 4,
        "outstanding": 3,
        "pastDue": 4,
        "cancelled": 2,
        "createdAt": "2021-11-11T00:00:00"
    },
    {
        "paid": 3,
        "outstanding": 2,
        "pastDue": 4,
        "cancelled": 3,
        "createdAt": "2021-03-03T00:00:00"
    }
]

我在这段代码中遇到了多个错误：

Reflect.ownKeys(data).forEach((data) => {
        chartData.push(
          [r.data];
          setIsLoading(false);
        );
      });

TS2322：类型 'BillingSummaryDTO[]' 不可分配给类型 'never'。

你知道如何正确设置数据吗？

Answer 1

const [chartData, setChartData] = useState([]); 应该常量 [chartData, setChartData] = useState(BillingSummaryDTO[])

Typescript 将 [] 指定为 never[] 类型。因此，当您想在 never 数组中插入 BillingSummaryDTO 数据时会出现错误。

TS2322：类型 'BillingSummaryDTO[]' 不可分配给类型 'never'

TS2322: Type 'BillingSummaryDTO[]' is not assignable to type 'never'

javascript

reactjs

recharts