属性“”在类型 'never' 上不存在。 （使用 Typescript 在映射 JSON 服务器数据上使用 State）

Question

我正在关注 mui 上的 React 教程并决定合并 typescript

供参考：Net ninja MUI

Notes.tsx

获取JSON服务器数据然后将其设置为注释

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

const Notes = () => {
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    fetch('http://localhost:8000/notes')
      .then((res) => res.json())
      .then((data) => setNotes(data));
  }, []);

在此处映射 JSON 服务器虚拟数据

  return (
    <div>
      {notes.map((note:string) => (
        <p key={note.id}>{note.title}</p>
      ))}
    </div>
  );
};

export default Notes;

db.json（JSON 服务器虚拟数据）

{
  "notes": [
    {
      "title": "Yoshi's birthday bash",
      "details": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
      "category": "reminders",
      "id": 1
    },
    {
      "title": "Complete my ninja training",
      "details": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.",
      "category": "work",
      "id": 2
    },
    {
      "title": "Order a pizza!",
      "details": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
      "category": "todos",
      "id": 3
    }
  ]
}

This is the Error that occurs

Answer 1

您需要键入您的笔记对象并告诉您的组件本地状态以及您的地图功能，请参阅下面的一些指示。

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

type Note = {
 title: string,
 details: string,
 category: "reminders" | "work" | "todos",
 id: number,
}

const Notes = () => {
  const [notes, setNotes] = useState<Note[]>([]);

  useEffect(() => {
    fetch('http://localhost:8000/notes')
      .then((res) => res.json())
      .then((data: Note[]) => setNotes(data));
  }, []);

 return (
    <div>
      {notes.map((note: Note) => (
        <p key={note.id}>{note.title}</p>
      ))}
    </div>
  );
};

export default Notes;