如何访问同一类中另一个属性内的属性

Question

我是一个反应型的菜鸟玩家，我只是在代码周围徘徊，为它添加更多选项，现在我想做一些事情，需要从同一状态对象内的另一个属性访问状态对象中的属性，这是我的码：

class App extends Component {
    state = {
        persons : [
          {name: "parsa", age: 45},
          {name: "cena", age: 98},
          {name: "jamil", age: 23}
        ],
    defaultPersons: [...this.state.persons]
    }
}

在这里我需要在defaultPersons属性中复制persons属性，这可能吗？ 我怎样才能做到这一点 ？

对任何混乱感到抱歉，并且

感谢大家 ：）

Answer 1

您可以在状态之外定义人员，并将数组分布到所需的位置。 但是，我要说的是，您应该认真考虑为什么要这样做。 有没有一种方法可以使代码变干，从而不需要两个相同的对象处于状态？

constructor(props) {
    super(props);
    const persons = [{key:'value'}, {key:'value'}];
    this.state = {
       persons: [...persons],
       defaultPersons: [...persons],
    }
}

Answer 2

有一种简单的方法可以实现所需的功能：在constructor初始化state

class App extends Component {
    constructor() {
         this.state = {
             defaultPersons : [
               {name: "parsa", age: 45},
               {name: "cena", age: 98},
               {name: "jamil", age: 23}
             ]
         };
         this.state.persons = [...this.state.defaultPersons];
     }
}

但是有一些细微差别。

1. 状态应仅包含影响组件外观的动态信息（因为setState .state任何更改.state触发render() ）。 您是否真的需要defaultPersons成为.state一部分？ 我认为最好将它直接设置到this.defaultPersons甚至在this之外的const 。

2. 您要求的操作（以及上面的我的变体）会进行浅拷贝。 因此，如果引用尚未更改，则defaultPersons[1]任何突变都可能会更改persons[1]项目。 尽管state改变数据本身并不是一个好主意，但我还是想强调一下这一点。

Answer 3

这一步不可能完成，因为在定义之前，没有this.state.persons可以引用，这就是鸡肉的情况。 这不是特定于类属性的，在其他情况下也会出现相同的问题：

const foo = {
  bar: 1,
  baz: foo.bar // there's no foo at this moment.
};

问题是由于defaultPersons不应成为状态的一部分而导致的。 似乎是一个不变的常数。 在这种情况下， defaultPersons可以是单独的属性：

class App extends Component {
    static defaultPersons = [
      {name: "parsa", age: 45},
      {name: "cena", age: 98},
      {name: "jamil", age: 23}
    ];

    state = {
        persons : [...App.defaultPersons]
    }

    revertToDefaultPersons() {
        this.setState(state => ({
            ...state,
            persons : [...App.defaultPersons]
        }));
    }
}

或者只是在类外部定义的常量。 这使事情更简单，但可能导致可测试性降低。

Answer 4

您还可以使用componentDidMount更新原始状态

class App extends Component {
    state = {
        persons : [
          {name: "parsa", age: 45},
          {name: "cena", age: 98},
          {name: "jamil", age: 23}
        ],
    defaultPersons: []
    }

     componentDidMount () {
     this.setState({
     defaultPersons: [...this.state.persons]
    })
  }
}