×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 24 – 不变地更新状态 in 反应

    课程清单
    [在React中不变地更新状态,在React中不变地更新状态]

    在第一课中,我们开始撤离人员。我们通过访问状态中的所有人员,使用人员索引删除要删除的一个元素并更新状态来做到这一点。
    这种方法的缺点是javascript对象和数组是引用类型。因此,当我像上一课中那样从我们的州找人时,我们将指针指向由React管理的原始人的对象。
    然后,如果我们将已经突变的原始数据拼接起来,尽管它确实可以正常工作而不会引发错误,但这并不是您真正应该做的。这可能会导致应用无法预测,并且 一个不好的方法.


    不变地更新状态

    一个好的做法是在操作之前创建持久性数组的副本。

    A simple way of doing this is by calling the slice() method. slice without arguments simply copies the full array and returns a new one which is then stored to its assigne.
    例如:在 App.js

    src / App.js
    
    ...
    deletePersonHandler = personIndex => {
    	const persons = this.state.persons.slice(); // Creates a new copy of array
    	persons.splice(personIndex, 1);
    	this.setState({ persons: persons });
    };
    ...
    

    然后,您可以安全地编辑新阵列,然后使用新阵列进行更新以做出反应。

    替代方法

    这种方法的替代方法是使用ES6功能,即可以简单地将人员设置为等于新数组的散布运算符
    例如:在 App.js

    src / App.js
    
    ...
    deletePersonHandler = personIndex => {
    	//  const persons = this.state.persons.slice();
      const persons = [...this.state.persons];    // Creates a new copy of array
    	persons.splice(personIndex, 1);
    	this.setState({ persons: persons });
    };
    ...
    

    new array can now use spread operator which are three dots ... , might looks strange but it is a javascript operator.
    what it does is, it spread out the elements of array into a list of elements which simply then gets added to the const persons array.
    So now we have an array a new array with the objects from the old array but not the old array itself. so that is equivalent to the slice approach use whichever one you prefer. but the spread operator (...) is a more modern one and you will see this spread operator more throughout this course.
    这样一来,我们可以得到与以前相同的行为,并且我们还没有解决错误消息。

    结论

    you should always update state in an immutable fashion so without mutating the original state first, reate a copy change that and then update the state with setState().

    反应introduction
    反应Component
    在React中不变地更新状态
  • 启用通知    不用了,谢谢