Javascript 反应错误：未捕获类型错误：无法读取属性'；0'；未定义的

反应版本：16.13.1

所以我在学习关于React的教程。我使用create react app创建了一个应用程序，并编写了以下代码：

import React from 'react'
import ReactDOM from 'react-dom'

const notes = [
  {
    id: 1,
    content: 'HTML is easy',
    date: '2019-05-30T17:30:31.098Z',
    important: true
  },
  {
    id: 2,
    content: 'Browser can execute only Javascript',
    date: '2019-05-30T18:39:34.091Z',
    important: false
  },
  {
    id: 3,
    content: 'GET and POST are the most important methods of HTTP protocol',
    date: '2019-05-30T19:20:14.298Z',
    important: true
  }
]

const App = (props) => {
  const { notes } = props

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        <li>{notes[0].content}</li>
        <li>{notes[1].content}</li>
        <li>{notes[2].content}</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <App notes={notes} />,
  document.getElementById('root')
)

export default App;

从“React”导入React
从“react dom”导入react dom
常量注释=[
{
id:1，
内容：“HTML很简单”，
日期：“2019-05-30T17:30:31.098Z”，
重要提示：正确
},
{
id:2，
内容：“浏览器只能执行Javascript”，
日期：“2019-05-30T18:39:34.091Z”，
重要提示：错误
},
{
id:3，
内容：“GET和POST是HTTP协议最重要的方法”，
日期：“2019-05-30T19:20:14.298Z”，
重要提示：正确
}
]
常量应用=（道具）=>{
常量{notes}=props
返回(
笔记

{notes[0]。内容}
{注释[1]。内容}
{注释[2]。内容}

)
}
ReactDOM.render(
,
document.getElementById（'root'））
)
导出默认应用程序；

---

我在第

{li>{notes[0].content}

行的开头收到一个错误“Uncaught TypeError:无法读取未定义的属性“0”

// const { notes } = props //skip this line

---

这里显示的代码实际上没有问题，您可能想检查其他地方是否有问题，您可以尝试在一个隔离的react环境中运行您发送的代码，以确保我所说的内容

---

此外，notes是一个全局常量，因此如果你只需要将其用于应用程序组件，你不必将其作为道具传递，你可以直接在应用程序组件中使用它。我想我知道你想在这里实现什么，你想拥有默认道具，但一旦道具传递给组件，你就要覆盖默认道具

您可以使用条件语句来执行此操作，而不是以这种方式进行破坏

该行代码已使用未定义的值覆盖默认值

找到下面的更正：

import React from "react";
import ReactDOM from "react-dom";

let notes = [
  {
    id: 1,
    content: "HTML is easy",
    date: "2019-05-30T17:30:31.098Z",
    important: true,
  },
  {
    id: 2,
    content: "Browser can execute only Javascript",
    date: "2019-05-30T18:39:34.091Z",
    important: false,
  },
  {
    id: 3,
    content: "GET and POST are the most important methods of HTTP protocol",
    date: "2019-05-30T19:20:14.298Z",
    important: true,
  },
];

const App = (props) => {
  if (props.notes) {
    notes = props.notes;
  }

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        <li>{notes[0].content}</li>
        <li>{notes[1].content}</li>
        <li>{notes[2].content}</li>
      </ul>
    </div>
  );
};

ReactDOM.render(
  <App notes={notes} />,
  document.getElementById('root')
)

export default App;

从“React”导入React；
从“react dom”导入react dom；
让注释=[
{
id:1，
内容：“HTML很简单”，
日期：“2019-05-30T17:30:31.098Z”，
重要提示：没错，
},
{
id:2，
内容：“浏览器只能执行Javascript”，
日期：“2019-05-30T18:39:34.091Z”，
重要提示：错误，
},
{
id:3，
内容：“GET和POST是HTTP协议最重要的方法”，
日期：“2019-05-30T19:20:14.298Z”，
重要提示：没错，
},
];
常量应用=（道具）=>{
如果（道具注释）{
注释=道具注释；
}
返回(
笔记

{notes[0]。内容}
{注释[1]。内容}
{注释[2]。内容}

);
};
ReactDOM.render(
,
document.getElementById（'root'））
)
导出默认应用程序；

此代码按原样工作。这在教程中也适用，但对我不起作用。也许你在别的地方打错了，或者问题是你的问题中没有包含的其他东西。也就是说，如果没有a，我们就无能为力。您可以删除这行：

const{notes}=props

。Notes只是一个常量，而不是一个道具。虽然它在OP的代码中是正确的，但它并没有真正的帮助，因为它是一个教程，并且在任何实际的用例中，数据不会硬编码到与组件相同的文件中！这是公平的，删除这一行实际上使我的代码工作。还是不知道为什么