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

问题描述

我正在构建一个React应用。我创建了一个动态表单（根据用户选择的数字生成X个输入字段（1-10））。但是，我想在映射函数中添加第二个输入字段。对于上下文，我正在构建一个闪存卡应用程序。我想将术语和定义添加到同一状态项。想法是，每个状态数组将为该术语保留一个对象，并为定义保留一个对象，以使每个定义保持其适当的术语。请注意，状态项以我的映射函数的索引命名。因此，例如，我想将术语和定义的第一个术语发送到this.state.0，依此类推……根据用户要添加的数量（最多10个），为每个术语和定义发送……。现在，我收到以下错误：

I am building a react app. I have created a dynamic form (generates X number of input fields (1-10) based on the number chosen by the user).That part works perfectly. However, I am wanting to add a second input field inside my mapping function. For context, I am building a flash card app. I want to add the term and the definition to the same state item. The idea is that each state array will hold an object for the term and an object for the definition in order to keep each definition with its proper term. Notice that the state items are named after the index of my mapping function. So for example, I want to send the term and definition to this.state.0 for the first term, etc... for each term and definition depending on how many the user wants to add (up to 10). Right now I'm getting the following error:

TypeError: Cannot read property 'term' of undefined

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

So how do I set each term and its definition to the state array, each to their own object of the array? Here is my component:

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

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

Any ideas about how I could set the object of a state array through my mapping function? Thanks in advance for any assistance.

推荐答案

无法读取未定义的属性'term'因为在该位置上没有这样的字段

Cannot read property 'term' of undefined coz there is no such field on that location

value={this.state.i.term}

根据您的初始状态，它应该像这样：

As per your initial state, it should look like this :

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

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

The same change will be applicable for your def field also

建议：

您应更改状态，例如：

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

然后您可以像这样使用它：

Then you can use it like this :

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

这篇关于如何在React中从动态形式在状态数组中设置对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！