javascript - บรรทัดที่ 0: ข้อผิดพลาดในการวิเคราะห์: ไม่สามารถอ่านคุณสมบัติ 'map' ของ undefined TypeScript React

ฉันกำลังแทนที่แอปที่สร้างด้วย React และ JS ด้วย TypeScript โดยใช้ ts migrate แต่เกิดข้อผิดพลาดดังต่อไปนี้ในไฟล์ App.tsx

Line 0: Parsing error: Cannot read property 'map' of undefined

ต่อไปนี้คือ App.tsx

import React, { useState, useEffect, useCallback} from 'react';
import './assets/styles/style.css';
import {AnswersList, Chats} from './components/index';
import FormDialog from './components/Forms/FormDialog';
import {db} from './firebase/index';

const App = () => {
  const [answers, setAnswers] = useState([]);
  const [chats, setChats] = useState([]);
  const [currentId, setCurrentId] = useState("init");
  const [dataset, setDataset] = useState({});
  const [open, setOpen] = useState(false);

  interface Dataset {
    "answers": Array<Answer>,
    "question": string
  }

  interface Answer {
    "answers": [
      {"content": string, "nextId": string}
    ]
  }


  const displayNextQuestion = (nextQuestionId: string, nextDataset: Dataset) => {
    addChats({
      text: nextDataset.question,
      type: 'question'
    })

      setAnswers(nextDataset.answers)
      setCurrentId(nextQuestionId)
  }

  const selectAnswer = (selectedAnswer: any, nextQuestionId: any) => {
    switch(true) {
      case (nextQuestionId === 'contact'):
          handleClickOpen()
          break;

      case (/^https:*/.test(nextQuestionId)):
          const a = document.createElement('a');
          a.href = nextQuestionId;
          a.target = '_blank';
          a.click();
          break;

      default:
          addChats({
              text: selectedAnswer,
              type: 'answer'
          })
        setTimeout(() => displayNextQuestion(nextQuestionId, dataset[nextQuestionId]), 500) 
        break;
    }
  }

  const addChats = (chat: any) => {
    setChats((prevState) => {
      return [...prevChats, chat]
    })
  }

  const handleClickOpen = () => {
    setOpen(true)
  };

  const handleClose = useCallback(() => {
      setOpen(false)
  }, [setOpen]);


  useEffect(() => { 
    (async() => {
      const initDataset = {};

      await db.collection('questions').get().then(snapshots => {
        snapshots.forEach(doc => {
          const id = doc.id
          const data = doc.data()
          initDataset[id] = data
        })
      })

      setDataset(initDataset)
      displayNextQuestion(currentId, initDataset[currentId])
    })()
  }, [])

  useEffect(() => {
      const scrollArea = document.getElementById('scroll-area')
      if (scrollArea) {
        scrollArea.scrollTop = scrollArea.scrollHeight
      } 
  })

  return(
    <section className="c-section"> 
      <div className="c-box">
        <Chats chats={chats} />
        <AnswersList answers={answers} select={selectAnswer} />
        <FormDialog open={open} handleClose={handleClose} />
      </div>
    </section>
  );
}

export default App;

ต่อไปนี้คือ package.json

{
  "name": "chatbot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/system": "^4.11.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.6",
    "@typescript-eslint/eslint-plugin": "^4.9.0",
    "@typescript-eslint/parser": "^4.9.0",
    "firebase": "^7.24.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3"
  },
  "resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {},
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "ts-migrate": "^0.1.10",
    "typescript": "^4.1.2"
  }
}

เมื่อฉันกำลังค้นคว้าเกี่ยวกับข้อผิดพลาด ฉันพบหน้านี้ ดังนั้นฉันจึงลองใช้อ้างอิงจากมัน แต่ก็ไม่ได้เปลี่ยนแปลงอะไร

อ้อ นี่คือสิ่งที่ฉันลองทำ

• ลบไฟล์ node_modules และติดตั้ง npm ใหม่อีกครั้ง
• กำลังติดตั้ง @typescript-eslint/eslint-plugin และ @typescript-eslint/parser

ถ้าคุณลบคำอธิบายของอินเทอร์เฟซ Dataset และอินเทอร์เฟซ Answer ใน App.tsx ข้อผิดพลาดที่เกี่ยวข้องจะหายไป แต่จะเกิดข้อผิดพลาดอีกประเภทหนึ่ง

ฉันไม่สามารถหาเบาะแสที่ดีจากการกูเกิลได้ จึงถามคำถามนี้

ฉันจะขอบคุณมากถ้าคุณสามารถบอกฉันเกี่ยวกับสาเหตุของ Line 0: Parsing error: Cannot read property 'map' of undefined และอื่น ๆ

คำตอบ #1

คุณได้รับข้อผิดพลาดเพราะ react-scripts=3.4.3 ไม่เข้ากันกับ typescript=^4.1.2 ปัญหาที่เกี่ยวข้องสามารถพบได้ที่นี่: https://github.com/facebook/create-react-app/issues/9515

คุณสามารถแก้ปัญหานี้ได้ทั้งโดย

1. อัปเกรดเป็น react-scripts เป็น >=4.0 (ซึ่งเพิ่มการสนับสนุนสำหรับ TypeScript 4)
2. ลดรุ่น typescript เป็น <4.