我正在构建一个react应用程序。我创建了一个动态表单（根据用户选择的数字生成 X 个输入字段（1-10））。这部分工作得很好。但是，我想在我的映射函数中添加第二个输入字段。对于上下文，我正在构建一个闪存卡应用程序。我想将术语和定义添加到同一个状态项中。这个想法是每个状态数组都将保存一个用于术语的对象和一个用于定义的对象，以便使每个定义都具有其适当的术语。请注意，状态项以我的映射函数的索引命名。因此，例如，我想将第一个术语的术语和定义发送到 this.state.0，等等......每个术语和定义取决于用户想要添加的数量（最多 10 个）。现在我收到以下错误：

TypeError: Cannot read property 'term' of undefined

那么如何将每个术语及其定义设置为状态数组，每个术语都设置为自己的数组对象？这是我的组件：

import React, { Component } from 'react'

export class TermForm extends Component {
    state = {
        0: [],
        1: [],
        2: [],
        3: [],
        4: [],
        5: [],
        6: [],
        7: [],
        8: [],
        9: []
    }

    onChange = (event) => this.setState({ [event.target.name]: event.target.value});

    render() {
        console.log(this.props.numberOfTerms);
        return (
            this.props.numberOfTerms.map((i) => (
                <div key={i}>
                    <input type="text" name={i.term} placeholder="TERM" value={this.state.i.term} onChange={this.onChange}></input>
                    <input type="text" name={i.def} placeholder="TERM" value={this.state.i.def} onChange={this.onChange}></input>
                </div>
            ))
        )
    }
}

export default TermForm

关于如何通过我的映射函数设置状态数组的对象的任何想法？在此先感谢您的帮助。