Javascript 如何正确映射带有单独单选按钮表单元素的React元素？

我正在尝试创建一个卡片元素，用户可以在其中对图像投票“是”、“否”或“可能”。现在它的读数就像单选按钮一样，一张图片有90个选项，而不是30个单独的带有3个选项的按钮。如何映射每张卡，使表单特定于图像？数组将读取为

{ userChoices: {
  characterName[0]:choice.value,
  characterName[1]:choice.value,
  ....
}}

const choiceCard=characterData.map（（字符，键）=>
{character.name}
对
不
大概
);

你离你想去的地方很近了，这里只需要处理两件事：

将每组按钮与一个字符关联

跟踪每个字符的状态

这是受控组件的自然用例。受控单选按钮的外观如下所示：

<input
    key={someID}
    type="radio"
    value={choice}
    checked={this.state.choice === choice}
    onChange={() => this.handleChange(choice)}
/>

const choices = [
    "Yes",
    "No",
    "Maybe"
]

const choiceCard = characterData.map((character, key) => {
    return (
        <label key={character.id}>
            {character.name}
            {choices.map(choice => {
                return (
                    <input
                        key={choice}
                        type="radio"
                        value={choice}
                        checked={this.state.userChoices[key] === choice}
                        onChange={() => this.handleChange(choice, key)}
                    />
                );
            })}
        </label>
    );
});

（见附件）

将此应用于您的问题，您将得到如下结果：

<input
    key={someID}
    type="radio"
    value={choice}
    checked={this.state.choice === choice}
    onChange={() => this.handleChange(choice)}
/>

const choices = [
    "Yes",
    "No",
    "Maybe"
]

const choiceCard = characterData.map((character, key) => {
    return (
        <label key={character.id}>
            {character.name}
            {choices.map(choice => {
                return (
                    <input
                        key={choice}
                        type="radio"
                        value={choice}
                        checked={this.state.userChoices[key] === choice}
                        onChange={() => this.handleChange(choice, key)}
                    />
                );
            })}
        </label>
    );
});

---

这里有一个快速而肮脏的代码笔，你可以用它来帮助你理解：

Legend！设置第二个。地图把我绊倒了！！这太完美了

handleChange = (choice, key) => {
    this.setState(prevState => ({
        userChoices: { ...prevState.userChoices, [key]: choice }
    }));
};