时间戳

首页 > 解决方案 > 映射可迭代道具对象的问题

javascript - 映射可迭代道具对象的问题

问题描述

在处理 React 自己的文档中的示例时，我无法协调我一直遇到的错误。

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

这是我的代码；React 文档中提供的许多片段之一，我观察到在这种情况下失败了：

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 用于调试目的，这是错误输出的图像（显示代码执行中断的位置）：

我正在查看文档以使用最新版本的 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) 可能不兼容使用我在文档中遵循的语法？

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

任何帮助，将不胜感激

标签： javascriptreactjs

解决方案

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

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

推荐阅读