React - 处理和验证动态数量的输入

Question

背景：我对 React 比较陌生，我正在尝试创建一个 React 抽认卡网站以添加到我的投资组合中。我想创建一个应用程序，为所选日语字母表中的每个字母创建“抽认卡”。平假名包含大约 107 个字母/组合字母，而片假名包含大约相同的内容。字母表有许多相同的字母，但它们在视觉上的书写方式不同。即 Hir：a = あ;吉：a=ア。这意味着在尝试验证任何给定输入的数据时，每个字母表都必须是唯一可识别的。

问题：如何动态创建所有的抽认卡，而无需手动为每个抽认卡创建状态。

Json 数据： jCharacters.json

卡片创建代码：

<div className="row">
    {Object.keys(this.state.jCharacters.hiragana.hir).map( (key, index) => (
        <div className="card text-center" key= {index}>
            <div>
                <h5 className="card-title" >{this.state.jCharacters.hiragana.hir[key].character}</h5>
                <input type="text" name={this.state.jCharacters.hiragana.hir[key].characterName} value={this.state.input[index]} onChange={this.handleChange.bind(this)} />
            </div>
        </div>
    ))}
</div>

handleChange: 当前代码为每个输入添加一个带有 characterName 的新状态。这是有缺陷的。

Change(event) {
    const { name, value } = event.target;
    this.setState({
        [name]: value
    });
};

感谢您的任何意见以克服这一障碍。

Answer 1

创建一个额外的组件（例如“抽认卡”），它有自己的状态。然后在地图中渲染这个组件：

const Flashcard = React.FC = ({character, name}) => {
    const [answer, updateAnswer] = React.useState("")
    React.useEffect(()=>{
        ...handleChange...
    },[answer])
    return <div>
            <h5 className="card-title" >{character}</h5>
            <input type="text" name={name} value={answer} onChange={(e) => updateAnswer(e.target.value)} />
        </div>
}

...

//in the main component:
<div className="row">
    {this.state.jCharacters.hiragana.hir.map((item, index) => (
        <div className="card text-center" key={index}>
            <Flashcard character={item.character} name={item.characterName} />
        </div>
    ))}
</div>