Question

在解决React自己的文档中的示例时，我一直无法解决遇到的错误。

似乎每当我将props对象传递到函数组件中，然后映射到props中存储的可迭代对象（在本例中为numbers中存储的数组）时，该对象就以某种方式存在进入映射操作不再可用，并返回undefined。

这是我的代码；我观察到的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。我还没有开始学习钩子，因为在继续进行钩子之前，我一直在努力加深对React基本概念的理解。我不想听起来像个白痴，但是由于React文档中提供的许多类似示例片段都无法正常工作（它们仅在CodePen示例中有效）是否有可能与最新版本的React（16.8）不兼容我在文档中遵循的语法？

否则，我对这些示例为何不起作用感到困惑。

任何帮助将不胜感激

Answer 1

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

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

无法对可迭代的道具对象进行映射

1 个答案: