React中使用ESLint和Prettier时如何解决Parsing Error: Unexpected Token？

你遇到的解析错误是因为在JSX中直接编写JavaScript逻辑却没有用大括号{}包裹，JSX无法识别未包裹的JavaScript代码，从而抛出语法错误。另外你的代码还缺少React列表渲染必需的key属性，这也会触发ESLint警告。

修复后的完整代码 #

import { Box, Typography, TextField } from '@mui/material';

const textFields = [
  {
    label: 'Name',
    placeholder: 'Enter a company name',
  },
  {
    label: 'Address',
    placeholder: 'Enter a company address',
  },
  {
    label: 'Email',
    placeholder: 'Enter an email',
  },
  {
    label: 'Telephone Number',
    placeholder: 'Enter a telephone number',
  },
];

return (
  <Box
    width={400}
    height={400}
    p={3}
    borderRadius={3}
    bgcolor='background.default'
    color='text.primary'
  >
    <Typography textAlign='center' color='black' variant='h6'>
      Add Company
    </Typography>
    <Box marginTop={3}>
      {/* 用{}包裹map表达式，同时添加唯一key */}
      {textFields.map((textField) => (
        <TextField
          key={textField.label}
          sx={{
            mt: 2,
            mb: 2,
          }}
          fullWidth
          label={textField.label}
          placeholder={textField.placeholder}
        />
      ))}
    </Box>
  </Box>
);

关键修复点 #

• 在textFields.map(...)外层添加{}，让JSX将其识别为JavaScript表达式
• 给每个TextField添加key属性，使用每个对象唯一的label值作为key，符合React列表渲染的要求，同时避免ESLint警告

内容的提问来源于stack exchange，提问作者baibhab07