javascript - 在 React 中使用任何形式的 Map 函数都会导致未定义的错误

Question

将我的代码简化为最简单的形式后，看起来我在任何位置的任何地方使用 map 函数时都遇到了无法解决的问题。

我知道在 Codepen 等上运行的示例中的代码无法在本地创建 React 应用程序项目，所以我想知道build设置是否存在问题。

我是 React 新手，大约 4-5 年没有积极编程，所以很可能是我的错

错误是映射中的迭代器参数具有未定义的值:下面的“d”以及编写类似代码以找到解决方案的时间

简化为最简单形式后的代码如下

在我的构建中不起作用的代码在 codepen 上可以工作。

我尝试过 props、状态类或 block 变量

我尝试过嵌套函数以及 => 函数

我尝试过不同的类不同的变量，并且错误总是完全相同

import { React, Component } from 'react';

class ProtoList extends Component {
  constructor(props) {
    super(props)
    this.state = {

    };

 }

 render() {
   let data = [{ "name": "test1" }, { "name": "test2" }];

   let listItems = data.map(d =>  
        <span key={d.name}>{d.name}</span>
   )
   return listItems;
 }}

export default ProtoList;

import React from 'react';
import Container from '@material-ui/core/Container';
import { makeStyles } from '@material-ui/core/styles';
import WebHeader from './components/WebHeader';
import WebMain from './components/WebMain';
import WebFooter from './components/WebFooter';
import ProtoList from './components/ProtoList';

const useStyles = makeStyles(theme => ({

  root: {
    minHeight: '500px',
    paddingLeft: '0px',
    paddingRight: '0px',
    backgroundColor: '#001e1c',
  },
}));

export default function App() {
  const classes = useStyles();

  return (
    <ProtoList />
    /*
    <Container className={classes.root}>
      <WebHeader />
      <WebMain />
      <WebFooter />
    </Container>
    */
  );
}

封装:

{
  "name": "telescout-pr2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-brands-svg-icons": "^5.10.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@material-ui/core": "^4.3.3",
    "@material-ui/icons": "^4.2.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "react-vis": "^1.11.7",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^6.2.2",
    "eslint-plugin-react": "^7.14.3"
  }
}

    TypeError: Cannot read property 'createElement' of undefined
    (anonymous function)
   render() {
    let data = [{ "name": "test1" }, { "name": "test2" }]; 
>   let listItems = data.map(d =>  
        <span key={d.name}>{d.name}</span>
    )
    return listItems;

Answer 1

createElement 方法是 React 用于构建组件的主要方法，它是未定义的，因为未导入 React 对象:

import React, { Component } from 'react';

干杯!