Javascript 对react使用任何形式的Map函数都会导致未定义的错误

在将代码简化为最简单的形式之后，似乎我在任何位置使用的map函数都有一个无法解决的问题

我知道示例中运行在Codepen等上的代码在本地不适用于CreateReact应用程序项目，所以我想知道构建设置是否有问题

我是一个新的反应，并没有积极编程约4-5年，所以它很可能是我的错误

Error是映射中的迭代器参数，该参数的值未定义，下面的值为：“d”，需要花费数天的时间编写类似的代码以找到解决方案

将代码简化为最简单的形式后，代码如下所示

在我的构建中不起作用的代码在codepen上起作用

我尝试过道具、状态类或块变量

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

我尝试过使用不同的类和不同的变量，错误总是完全相同的

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>
    */
  );
}

试试这个

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

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

如果要返回元素数组，则必须将它们包装在JSX元素中

---

还有，只是一个关于React的提示。如果未使用状态，请将其设置为功能组件，而不是类组件。

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

import React, { Component } from 'react';

---

干杯

我认为你的反应不对。尝试从“React”导入React，{Component}@卢瑟福·旺金顿：原来这就是解决办法。明天我会读更多关于这方面的内容现在很晚了。如果你添加它作为一个答案，我会检查它作为接受的解决方案。非常感谢。会的，很乐意帮忙！嗨，原来是import参数错了，应该是import-React，{Component}来自'React'；我一直在混合使用这两个类，我想我只有三个类，其余的是功能组件，还有几个非react类，我很高兴它看起来是一个不错的代码风格

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

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

import React, { Component } from 'react';