我必须更改组件的状态,但我不知道此代码是否是不变的。我想出了两种方法来解决这个问题。这两个代码都能很好地工作,但是不知道它们是否是不变的。如果您能告诉我哪些比这些代码更好或更哪个代码,我将不胜感激。

试验1

  handleRemove = id => {
    const { dummyData } = this.state;
    delete dummyData[id];

    this.setState({ dummyData });
  };


试用2

  handleRemove = id => {
    const { dummyData } = this.state;

    this.setState({
      dummyData: {
        ...Object.keys(dummyData)
          .filter(key => key !== id)
          .reduce((acc, cur) => {
            return {
              ...acc,
              [cur]: dummyData[cur]
            };
          }, {})
      }
    });
  };

最佳答案

试验1将变异dummyData,试验2不会变异,但过于复杂。

其他替代方法是:


使用es6对象解构:

const { [id]: _, ...dummyData } = this.state.dummyData;
this.setState({ dummyData });

使用其他实用程序功能,例如lodash的_.omit
使用库,使您可以自由修改对象而无需对其进行更改,例如immer

10-06 02:29