React Hook嵌套map渲染Radio单选框每行单选功能问题咨询

问题根因 #

你出现全选异常的核心原因是Controller返回的field对象里包含value字段，直接{...field}展开后会覆盖你给Radio组件显式声明的value，同时没有显式绑定checked状态，导致所有绑定同个表单name的Radio选中状态同步错乱。

修复代码 #

调整两处Radio的渲染逻辑，显式控制checked状态和onChange逻辑即可，你漏写的外层行遍历逻辑也补充在代码里了：

<TableHead>
    <TableRow>
        <TableCell />
            <TableCell align="center">None</TableCell>
            {roleTypeProject.map(item => {
                return <TableCell align="center">{item.label}</TableCell>;
            })}
    </TableRow>
</TableHead>
<TableBody>
{/* 外层遍历行数据的逻辑 */}
{tableRowList.map(item => (
  <TableRow key={item.id}>
      <TableCell>{item.label}</TableCell>
          <TableCell align="center">
              <Controller
                  name={`radio_${item.name}`}
                  control={control}
                  render={({ field }) => {
                      return (
                          <Radio                                                                
                           {...field}
                           value="none"
                           checked={field.value === "none"}
                           name={`radio_${item.name}`}
                           color="primary"
                           disabled={item.name === 'owner'}
                           inputProps={{ 'aria-label': item.name }}
                           onChange={(e) => field.onChange(e.target.value)}
                          />
                      );
                  }}
              />
          </TableCell>
          {roleTypeProject.map(p => {
              return (
                  <TableCell align="center">
                      <Controller
                          name={`radio_${item.name}`}
                          control={control}
                          render={({ field }) => {
                          return (
                              <Radio
                                  {...field}
                                  value={`${item.id} ${p.id}`}
                                  checked={field.value === `${item.id} ${p.id}`}
                                  name={`radio_${item.name}`}
                                  disabled={
                                      item.name === 'owner' &&
                                      p.name === 'viewer'
                                  }
                                  color="primary"
                                  inputProps={{ 'aria-label': item.name }}
                                  onChange={(e) => field.onChange(e.target.value)}
                              />
                          );
                      }}
                  />
              </TableCell>
          );
      })}
  </TableRow>
))}
</TableBody>

逻辑说明 #

• 同一行的所有Radio都绑定同一个radio_${item.name}表单字段，天然属于同一个互斥组，只要checked状态绑定正确就能实现每行仅选一个的效果
• 显式指定onChange逻辑，避免field自带的onChange逻辑处理单选值不符合预期

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