javascript - 无法映射可迭代的 Prop 对象

Question

我在处理 React 自己的文档中的示例时遇到了一个不断遇到的错误。

似乎每当我将 props 对象传递给函数组件，然后映射存储在 props 中的可迭代对象(在本例中是存储在 numbers 中的数组)时，对象以某种方式不再可用，进入映射操作并返回未定义。

这是我的代码； one of many snippets provided in the React docs我观察到这种情况失败了:

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;

为了调试目的，我在第 13 行包含了一个 console.log，这里是一个 image错误输出(显示代码执行中断的位置):

我正在查看文档以使用最新版本的 Create-React-App 进行练习。我在 package.json 中的依赖如下:

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

对我来说似乎很奇怪的一件事是控制台输出中的第三个错误行引用了 renderWithHooks。我还没有开始学习 hooks，因为在学习 hooks 之前我一直在努力巩固我对 React 基本概念的理解。我不想听起来像个白痴，但 React 文档中提供的许多类似示例片段都不起作用(它们仅在 CodePen 示例中起作用)是否可能是最新版本的 React (16.8) 不兼容使用我在文档中遵循的语法？

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

任何帮助将不胜感激

Answer 1

事实证明，不，这不是我的全部代码。该错误是由于在 Create-React-App 的 index.js 文件中再次调用 ReactDOM.render() 造成的。

现在我已经将 NumberList 组件和 numbers 数组导入到 index.js 中，调用 ReactDOM.render()使用预期的输出更新 UI。