Question

在将元素插入数组后，当我重置时，它不会转到指向[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;

Answer 1

我认为您在这里与const关键字混淆了。由于javascript中的数组是引用，因此您正在改变状态。

当您使用数组声明const initialStateOfList时，您可以自由地向此变量添加变量。 “ const”在这里表示一旦声明就不能重新分配该变量。但是在数组内部，可以更改元素。

例如

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

因此，每次您必须创建新数组并且不对原始数组引用进行变异时。

Answer 2

原因是您正在对list进行突变，而反应状态不允许这样做，

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});
    }

    //Read comment 
    addItem=(event)=>{
        event.preventDefault();
        // here you are mutating list in state, never do this in react instead you can use spread operator to create new array
        //this.state.list.push(this.state.tempo);
        const newList = [...this.state.list, this.state.tempo]
        this.setState({tempo:'', list: newList});
    }

    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>
        );
    };
}

Answer 3

您直接在

上用initialStateOfList进行了push的突变

this.state.list.push(this.state.tempo)

导致问题的原因。您需要先克隆数组，然后再进行突变。

有很多方法可以克隆对象（数组是一种对象），以避免直接变异。

const { list, tempo } = this.state // Should use Object destructuring for clean code

const newList  = Object.assign({}, list)  // Object.assign
const newList1 = [...list]                // Spread syntax
const newList2 = _.clone(list)            // `lodash` library

newList.push(tempo)
this.setState({list: newList, tempo: ''})

Answer 4

您可以尝试使用自定义重置功能重置为原始状态：

import React, { Component } from 'react';

const getDefaultState = () => ({
  myArray: [1,2,3],
});

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { ...getDefaultState() };
  }

  componentDidMount() {
    this.setState({ myArray: [4,5,6] })
  }

  resetState = () => {
    this.setState({ ...getDefaultState() });
  };

  render() {
    return (
      <div onClick={this.resetState}>
        {JSON.stringify(this.state.myArray)}
      </div>
    );
  }
}

在反应中重置阵列不会进入原始状态

4 个答案: