时间戳

首页 > 解决方案 > 反应中的重置数组不会进入原始状态

arrays - 反应中的重置数组不会进入原始状态

问题描述

将元素插入数组后，当我重置时，它不会转到[1,2,3,4,5]的initialStateOfList。

例如，如果我插入 6 和 7，然后按清除然后重置按钮，它会转到 [1,2,3,4,5,6,7] 而不是 [1,2,3,4,5] .

我应该怎么做才能让它回到原来的状态？

import React , {Component} from 'react';
import {render} from 'react-dom';

const initialStateOfList = [1,2,3,4,5];

class Form extends Component{

   state = {
    tempo : '',
    list : initialStateOfList
  };

  clearArray=()=>{
    this.setState({list:[]});
  }

  resetArray=()=>{
    this.setState({list:initialStateOfList});
  }

  tempAdd=(event)=>{
    this.setState({tempo:event.target.value});
  }

  addItem=(event)=>{
    event.preventDefault();
    this.state.list.push(this.state.tempo);
    this.setState({tempo:''});

  }

  render(){

    const listitem = this.state.list.map((number) =>  <li>{number}</li>);


    return(
      <div>
        <form ref="form" id="getInput" onSubmit={this.addItem}>
          {this.state.list.map((listItem)=><li>{listItem}</li>)}
          <input type="text" ref="formText" id="adder" onBlur={this.tempAdd} />
          <input type="submit" ref="formSubmit" id="passer" />
          <button id="clear" onClick={this.clearArray}>clear</button>
          <button id="reset" onClick={this.resetArray}>reset</button>

        </form>
      </div>
    );
  };
}

export default Form;

标签： arraysreactjs

解决方案

我认为您在这里对 const 关键字感到困惑。由于 javascript 中的数组是引用，因此您正在改变状态。

当您使用数组声明 const initialStateOfList 时，您将能够自由地向该变量添加变量。这里的“const”意味着一旦声明你就不能重新分配那个变量。但是在数组内部，元素是可以改变的。

例如

const arr1 = [1,2,3];
arr1.push(4); // Possible. No Error
arr1 = [1,2,3,4]; // Not possible.

因此，每次您必须创建新数组并且不要改变原始数组引用。

推荐阅读