分享
三行代码  ›  专栏  ›  技术社区  ›  Luke Sharon

如何将状态设置为react中的对象数组

  •  1
  • Luke Sharon  · 技术社区  · 1 周前

    我正在开发一个闪存卡反应应用程序。我已将我的状态初始化为一个对象数组(用户一次最多只能添加10个术语/定义,因此限制为10个),如下所示:

    state = { 
            allTerms: [
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            },
            {
                term: '',
                def: ''
            }
        ]
    }
    

    输入来自一个动态表单,该表单根据用户想要添加的卡片数量提供X个输入字段。我当前的问题是onChange函数。当用户在输入字段中键入某些内容时(现在我可以使用类似的解决方案定义术语和图形),更改将调用我的on change term函数,其中我有一个for循环:

    onChangeTerm = (event) => {
    
            for(var i = 0; i < this.props.numberOfTerms.length; i++) {
                this.setState({ allTerms[i].term: event.target.value});
            }
        }
    

    4 回复  |  直到 1 周前
        1
  •  1
  •   Vivek Doshi    1 周前

    干得好:

    您可以将事件和索引都传递给函数:

    裁判是从你的 prev question

    <input type="text" name={i.term} placeholder="TERM" 
    value={this.state.allTerms[i].term} 
    onChange={(e) =>this.onChange(e,i)}> // <--- Change
    </input>
    

    更新如下:

    onChangeTerm = (event , index) => {
        this.setState({
            allTerms : [
            ...this.state.allTerms.splice(0,index) ,
            {
                ...this.state.allTerms[index],
                term: event.target.value
            },
            ...this.state.allTerms.splice(index+1) ,
        });
    }
    
        2
  •  1
  •   ROOT    1 周前

    在循环中更新状态是个坏主意,我建议您使用 object spread operator

    onChangeTerm = (event) => {
      let allTerms = {}
      for(var i = 0; i < this.props.numberOfTerms.length; i++) {
        allTerms = { ...this.state.allTerms[i], term: event.target.value }
      }
      this.setState({ allTerms });
    }
    
        3
  •  0
  •   mohamed ibrahim    1 周前

    首先,你的输入应该有

    <input type="text" id = 'term'/>
    

    第二,你的 一旦改变 功能应该是:

    onChangeTerm = (e) =>  {
    e.preventDefault();
     this.setState({ [e.target.id]: e.target.value}); 
     }
    

    多项输入 所以不要用相同的名字重复相同的输入。在您的状态下也更改您的输入名称,不要将您自己置于不可感知的for循环中。

        4
  •  0
  •   josef55    1 周前

    • 循环中的更新状态是个坏主意->可能会导致性能下降,因为它将经常呈现
    • state对象是重复的,我会动态地构建它

    下面是一个工作示例: code sandbox