React报错：SyntaxError: Unexpected token '<' 问题求助

你的代码里有几个关键问题导致了SyntaxError: Unexpected token '<'，下面是问题分析和修正后的完整代码：

问题分析 #

• BirthdayField组件缺少return语句：函数组件必须返回JSX内容，直接在函数里写<select>会触发语法错误，JSX必须被return包裹。
• dropdownYear函数未返回生成的选项数组：循环生成了option元素但没有返回数组，调用该函数时不会渲染任何选项。
• 错误导入onChange：onChange是组件的事件处理回调，不是React的内置导出，不需要从react导入，需要自定义。
• 未定义year状态变量：select的value属性绑定的year变量不存在，需要用useState管理选中的年份状态。

修正后的完整代码 #

import React, { useState } from 'react';

function SubmitButton(){
  return (
    <button>Submit</button>
  );
}

const dropdownYear = () => {
  const arr = [];
  const start = new Date().getFullYear() - 100;
  const current = new Date().getFullYear();

  for (let i = current; i >= start; i--){
    arr.push(<option key={i} value={i}>{i}</option>) // 添加key属性，符合React列表渲染要求
  }
  return arr; // 返回生成的选项数组
}

function BirthdayField(){
  const [year, setYear] = useState('0'); // 定义年份状态，初始值为默认选项的value

  const handleYearChange = (e) => {
    setYear(e.target.value); // 处理年份选择变化
  }

  // 添加return包裹JSX
  return (
    <select 
      className='bd-form'
      name='year'
      onChange={handleYearChange}
      value={year}
    >
      <option value='0'>Year</option>
      {dropdownYear()}
    </select>
  );
}

export default function MyApp(){
  return (
    <div>
      <BirthdayField />
      <SubmitButton />
    </div>
  );
}

额外说明 #

• 给生成的option添加了key属性，这是React列表渲染的要求，避免控制台警告。
• 使用useState管理选中的年份，确保组件是受控组件，表单值与状态同步。

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