如何在 React 中从动态形式设置状态数组中的对象答案

【问题标题】：How to set object in state arrays from dynamic form in React如何在 React 中从动态形式设置状态数组中的对象
【发布时间】：2020-09-09 23:07:39
【问题描述】：

我正在构建一个反应应用程序。我创建了一个动态表单（根据用户选择的数字生成 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

关于如何通过映射函数设置状态数组的对象有什么想法吗？提前感谢您的帮助。

【问题讨论】：

为了澄清，你能举一个这种状态的例子吗？
加上道具中的“numberOfTerms”是什么？

标签： javascript arrays reactjs mapping state

【解决方案1】：

Cannot read property 'term' of undefined 因为那个位置没有这样的字段

value={this.state.i.term}

根据您的初始状态，它应该如下所示：

value={this.state.i[0]?.term}

同样的更改也适用于您的 def 字段

建议：

你应该像这样改变状态：

state = [
    {
        term : "" ,
        def : ""
    },
    {
        term : "" ,
        def : ""
    },
    ...
]

然后你可以这样使用它：

value={this.state[i].term}

【讨论】：