Question

我是React Noob播放器，我只是在代码周围徘徊，为它添加更多选项，现在我想做一些事情，需要从同一状态对象内的另一个属性访问状态对象中的属性，这是我的代码：

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

有一种简单的方法可以满足您的需要：在state中初始化constructor

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

但是有些细微差别。

状态应仅包含会影响组件外观的动态信息（因为.state的任何变化都会触发setState触发）。您是否真的需要render()才能成为defaultPersons的一部分？我认为最好将其直接设置在.state之外的this.defaultPersons甚至const中。
您要求的操作（以及上面的我的变体）进行浅拷贝。因此，如果引用尚未更改，则this的任何突变都可以更改defaultPersons[1]的项目。而且尽管persons[1]中的数据突变本身并不是一个好主意，但我还是想强调一下。

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

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

4 个答案: