Javascript 映射时如何管理多个单选选项组的状态

我希望能够管理将动态呈现的无线电组的状态

下面的代码呈现了两组无线电组（可能更多），两组状态都由“const[delay，setDelay]=useState（'accept'）；”管理。我需要分别管理每个组的状态

const [delay, setDelay] = useState('accept');

...

{data.map(({ delayOwner }, index: number) => (
            <Tr key={index}>
              {delayOwner && (
                <Td>
                  <RadioOption
                    groupId={`radioDelay-${index}`}
                    label="Accept"
                    onChange={() => setDelay('accept')}
                    value={delay === 'accept'}
                  />
                  <RadioOption
                    groupId={`radioDelay-${index}`}
                    label="Reject"
                    onChange={() => setDelay('reject')}
                    value={delay === 'reject'}
                  />
                </Td>
              )}

---

任何帮助都将不胜感激

如果需要单独管理状态，则声明两个状态

const [groupOneDelay, setGroupOneDelay] = useState('accept');
const [groupTwoDelay, setGroupTwoDelay] = useState('accept');

如果映射将成为一个问题，并且该组件/文件中的任何其他内容都不需要该状态，那么您可能应该将该状态移动到另一个组件中，并让该组件单独处理该状态

差不多

export default function RadioOptionComponent() {
  const [delay, setDelay] = useState('accept');

  return (
    <div
      groupId={`radioDelay-${index}`}
      label="Accept"
      onChange={() => setDelay({...delay, index:"accept"})}
      value={delay[index] === 'accept'}
    />
  )
}

导出默认函数RadioOptionComponent（）{
const[delay，setDelay]=useState（'accept'）；
返回(
setDelay（{…delay，索引：“accept”}）
值={delay[index]=='accept'}
/>
)
}

然后渲染该组件

---

也看到JMadelaine的评论，因为你应该考虑为什么在这里使用单选按钮。

你需要使用你的状态的索引来保持它分开/<

{data.map(({ delayOwner }, index: number) => (
                            <Tr key={index}>
                                {delayOwner && (
                                    <Td>
                                        <RadioOption
                                            groupId={`radioDelay-${index}`}
                                            label="Accept"
                                            onChange={() => setDelay({...delay, index:"accept"})}
                                            value={delay[index] === 'accept'}
                                        />
                                        <RadioOption
                                            groupId={`radioDelay-${index}`}
                                            label="Reject"
                                            onChange={() => setDelay({...delay, index:"reject"})}
                                            value={delay[index] === 'reject'}
                                        />
                                    </Td>
                                )}

{data.map（{delayOwner}，索引：number）=>(
{delayOwner&&(
setDelay（{…delay，索引：“accept”}）
值={delay[index]=='accept'}
/>
setDelay（{…延迟，索引：“拒绝”}）
值={延迟[索引]=='reject'}
/>
)}

正在映射无线组，因此我不确定如何将这些组放在听起来像您可能需要创建另一个组件，然后让该组件管理自己的状态。是否有原因必须在映射发生的这个级别管理状态？不必在映射发生的这个级别管理状态s、 您建议在哪里管理它？当然，很乐意提供帮助，欢迎使用Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。您不应该在此处使用单选按钮。如果可以同时选择这两个选项，您应该使用复选框。单选按钮用于从中选择单个选项每个选项，复选框用于选择单个不相关的选项。当有太多选项显示为单选按钮时，或者当显示单选按钮（如年份选择器）没有意义时，选择（下拉）用于选择多个选项中的一个。实际上有两个组（或更多）无线电选项，所以无线电选项在这里是合适的；加上这是用户体验设计：）啊，我认为无线电选项是一个单独的单选按钮-我的坏：）。NP，谢谢你的输入，我感谢你的每一个建议。：）您好，iamwebkalakar，谢谢您的建议，我试图在代码中实现它，但我得到了这个typeScript错误：“只能从对象类型创建排列类型。ts（2698）”

{data.map(({ delayOwner }, index: number) => (
                            <Tr key={index}>
                                {delayOwner && (
                                    <Td>
                                        <RadioOption
                                            groupId={`radioDelay-${index}`}
                                            label="Accept"
                                            onChange={() => setDelay({...delay, index:"accept"})}
                                            value={delay[index] === 'accept'}
                                        />
                                        <RadioOption
                                            groupId={`radioDelay-${index}`}
                                            label="Reject"
                                            onChange={() => setDelay({...delay, index:"reject"})}
                                            value={delay[index] === 'reject'}
                                        />
                                    </Td>
                                )}