与 Typescript 反应：“never[]”类型的参数不可分配给“StateProperties |”类型的参数(() => 状态属性)'

Posted 2023-02-22

【中文标题】与 Typescript 反应：“never[]”类型的参数不可分配给“StateProperties |”类型的参数(() => 状态属性)\'

【英文标题】：React with Typescript: Argument of type 'never[]' is not assignable to parameter of type 'StateProperties | (() => StateProperties)'与 Typescript 反应：“never[]”类型的参数不可分配给“StateProperties |”类型的参数(() => 状态属性)'

【发布时间】：2020-07-31 17:55:27

【问题描述】：

我正在练习打字。对于后端，我使用 node express typescript，对于前端，我使用 react typeScript。我从后端获取数据并尝试在我的浏览器上呈现它。我收到一个错误：property 'name' does not exist on type 'never'. TS2339。我认为这个错误来自打字稿。这是错误visualization

这是我的后端设置

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】：

您需要提供接口/类型别名，以便 TypeScript 知道 state 的类型。

为state 创建接口后，您需要提供该接口作为useState 的泛型。

要解决第二个问题，您需要为 <li> 元素的每个项目提供 key 道具

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

【讨论】：

它没有帮助。我上传了新错误的图片。

@juha 我的错。我忘记将其作为数组输入。请参考我的更新答案。

仍然没有帮助:(

它有效。谢谢。你能解释一下发生了什么吗？

你解构数据了吗？