单选按钮与React JSX断开-表达式必须有一个父元素

Question

import React, { useEffect, useState } from 'react';
import { EmployeeList } from '../EmployeeList/EmployeeList';
export default function EmployeeMenu(props) {

const [employeeList, setEmployeeList] = useState(() => new EmployeeList());
useEffect(() => employeeList.getEmployees(), [employeeList]);
const handleEmployeeChange = (event, data) => {
props.setEmployee(event.target.value);
console.log(event.target.value);
}

function EmployeeMenu() {
let temp = employeeList.employees.map((employee) => (
<div>
<input type="radio" id={employee.phone_number} name="employee_name" value={employee.first_name} />
<label htmlFor={employee.phone_number}>{employee.first_name} {employee.last_name}</label>
</div>
));
return temp;
}
return(
<form onChange={handleEmployeeChange}>
<EmployeeMenu />
</form>
);
}

代码产生

这就是代码产生的结果。这接近我想要实现的目标，但当我选择不同的员工时，我的单选按钮不会选中/取消选中。

这是因为当我映射employeeList数组中的信息时，每个输入和标签都在一个单独的div中。但如果我不把它们包起来，我会得到"；JSX表达式必须有一个父元素"；。有人建议我如何更好地映射数组中的单选按钮，使它们保持在同一表单组中吗？

Answer 1

在"形式"；元素，它必须是form元素(input(的类型。但是div不是form元素的类型，所以它有一个警告。下面的代码是正确的：

<form onChange={handleEmployeeChange}>
<input type="radio" id={employee.phone_number} name="employee_name" value={employee.first_name} />
<label htmlFor={employee.phone_number}>{employee.first_name} {employee.last_name}</label>
</form>

如果您想将其打包为组件；你的代码应该是：

function EmployeeMenu() {
let temp = employeeList.employees.map((employee) => (
<>
<input type="radio" id={employee.phone_number} name="employee_name" value={employee.first_name} />
<label htmlFor={employee.phone_number}>{employee.first_name} {employee.last_name}</label>
</>
));
return temp;
}
return(
<form onChange={handleEmployeeChange}>
<EmployeeMenu />
</form>
);

Answer 2

您的EmployeeMenu函数被视为FC(功能组件(。你应该选择

• 用反应片段:包裹返回的temp

  return <>{temp}</>;
  

• 或者只是将其称为一个函数，而不是一个组件：

  <form onChange={handleEmployeeChange}>
  {EmployeeMenu()}
  </form>