Question

反应版本：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;

在行<li>{notes[0].content}</li>的开头出现错误“未捕获的TypeError：无法读取未定义的属性'0'”

Answer 1

您无需传递道具，您将直接获得笔记

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

Answer 2

您在此处显示的代码实际上没有任何问题，您可能想检查其他地方是否有问题，您可以尝试在隔离的反应环境中运行您发送的代码以确保我在说什么< /p>

另外，notes 是一个全局常量，所以如果你只需要它用于 App 组件，你不必将它作为 prop 传递，你可以直接在 App 组件中使用它

Answer 3

我想我知道你想在这里实现什么，你想要拥有默认道具，但是一旦道具被传递给组件，你想要覆盖默认道具。

你可以用条件语句来做到这一点，而不是那样破坏。

那行代码已经用一个未定义的值覆盖了默认值。

找到以下更正：

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;

反应错误：未捕获的TypeError：无法读取未定义的属性“ 0”

3 个答案: