reactjs - React med Typescript: Argument av typen 'never[]' kan inte tilldelas till parameter av typen 'StateProperties | (() => StateProperties)'

Jag övar på TypeScript. För backend använde jag Node Express TypeScript och för frontend använde jag React TypeScript. Jag hämtade data från backend och försöker visa det i min webbläsare. Jag får ett fel: property 'name' does not exist on type 'never'. TS2339. Jag tror att detta fel kommer från TypeScript. Detta är felvisualiseringen

Detta är min backenduppsättning

import express = require("express");
import cors = require("cors");
const app = express();
app.use(cors());
const port = 8080;
app.get("/", (req, res) =>
  res.send([
    {
      name: "John",
      age: 36
    },
    {
      name: "alex",
      age: 27
    }
  ])
);

app.listen(port, () => console.log(`server running port ${port}`));

Detta är min React-komponent

    import React, { useEffect, useState } from "react";

interface StateProperties {
  name: string;
  age: number;
}

//StateProperties | (() => StateProperties)
function App() {
  const [state, setState] = useState<StateProperties>([]);

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const response = await fetch("http://localhost:8080/");
    const data = await response.json();
    console.log(data);
    setState(data);
  };

  return (
    <div className="App">
      {state.length}

      {state.map((list, index) => {
        return <li key={index}>{list.name}</li>;
      })}
    </div>
  );
}

export default App;

Svar #1

Du behöver tillhandahålla gränssnitten/typaliasen så att TypeScript kommer att känna till typningen av state.

Efter att ha skapat gränssnittet för state kommer du att behöva tillhandahålla gränssnittet som generics för useState.

För att lösa det andra problemet måste du tillhandahålla key-egenskaper till varje objekt av <li>-elementet

interface StateProperties {
  name: string;
  age: number;
}

function App() {
  const [state, setState] = useState<StateProperties[]>([]);

  // do the rest

return (
  <div className="App">
    {state.map(({ name, age }) => {
      return <li key={`${name}-${age}`}>{name}</li>; //FROM HERE ERROR IS COMING
    })}
  </div>
  );

}

Relaterade artiklar