Реагируйте с Typescript: Аргумент типа 'never []' не может быть назначен параметру типа 'StateProperties | (() => StateProperties) ' - PullRequest
Новая
       13

Реагируйте с Typescript: Аргумент типа 'never []' не может быть назначен параметру типа 'StateProperties | (() => StateProperties) '

0 голосов
/ 18 апреля 2020

Я практикую машинопись. Для бэкэнда я использовал нода express typcript, а для внешнего интерфейса - реактивный typeScript. Я получил данные из бэкэнда и попытался отобразить их в своем браузере. Я получаю ошибку: property 'name' does not exist on type 'never'. TS2339. Я думаю, что эта ошибка исходит от машинописи. Это ошибка визуализация

Это моя настройка бэкэнда 

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}`));

Это мой компонент React 

    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;

1 Ответ

0 голосов
/ 18 апреля 2020

Вам необходимо предоставить псевдонимы интерфейсов / типов, чтобы TypeScript мог знать, что набрано state.

После создания интерфейса для state вам потребуется предоставить интерфейс в качестве обобщений для useState.

Чтобы решить 2-ю проблему, вам нужно будет предоставить key реквизит каждому элементу <li> элемента 

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>
  );

}
...