[英]React with Typescript: Argument of type 'never[]' is not assignable to parameter of type 'StateProperties | (() => StateProperties)'
I am practicing typescript.我正在练习 typescript。 For the backend, I used node express typescript and for the frontend, I used react typeScript.
对于后端,我使用 node express typescript,对于前端,我使用 react typeScript。 I fetched the data from the backend and try to render it on my browser.
我从后端获取数据并尝试在我的浏览器上呈现它。 I am getting an error:
property 'name' does not exist on type 'never'. TS2339
我收到一个错误:
property 'name' does not exist on type 'never'. TS2339
property 'name' does not exist on type 'never'. TS2339
. property 'name' does not exist on type 'never'. TS2339
。 I think this error is coming from typescript.我认为这个错误来自 typescript。 This is the error visualization
这是错误可视化
This is my backend setup这是我的后端设置
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}`));
This is is my React component这是我的 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;
You need to provide the interfaces/type aliases so that TypeScript will know the typings of state
.您需要提供接口/类型别名,以便 TypeScript 知道
state
的类型。
After creating the interface for state
, you will need to provide the interface as the generics for useState
.在为
state
创建接口后,您需要为 useState 提供接口为useState
。
To solve the 2nd issue, you will need to provide the key
props to each item of the <li>
element要解决第二个问题,您需要为
<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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.