Javascript iterable props对象上的映射问题

我在处理React自己文档中的示例时遇到了一个错误，我在协调这个错误时遇到了困难

似乎每当我将一个props对象传递到函数组件中，然后映射到props中存储的一个可修改对象（在本例中是存储在

numbers

中的数组）上时，该对象在映射操作中不知何故不再可用，并返回未定义的

这是我的密码；我观察到这个案例失败了：

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

function ListItem(props) {
  return (
    <li>{props.value}</li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;

  console.log(numbers, typeof numbers);

  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>Feel-Better Chicken and Rice Soup
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

export default NumberList;

我觉得奇怪的是，控制台输出中的第三个错误行引用了

renderWithHooks

。我还没有开始学习钩子，因为在开始学习钩子之前，我一直在努力巩固对React基本概念的理解。我不想听起来像个白痴，但由于React文档中提供的许多类似示例片段都不起作用（它们仅在CodePen示例中起作用），React的最新版本（16.8）是否可能不符合我在文档中遵循的语法

否则，我不知道为什么这些例子不起作用

---

任何帮助都将不胜感激，因为事实证明，不，这不是我的全部代码。错误是由于在Create React App的index.js文件中再次调用

ReactDOM.render（）

---

现在，我已经将

NumberList

组件和

numbers

数组导入index.js，调用

ReactDOM.render（）

在那里用预期的输出更新UI。

这是您的全部代码吗？因为当我把它放在codesandbox中时，它不会出错。为什么在你这边叫了三次？我在本地和codepen上都有一次输出（您可以通过单击JS代码左上角的cog来指定libs的版本）。

"dependencies": {
  "react": "^16.8.1",
  "react-dom": "^16.8.1",
  "react-scripts": "2.1.5"
}