Как присвоить props в state в react.js?

@ciara 

В React.js состояние компонента (state) не должно зависеть от свойств компонента (props), поскольку свойства могут изменяться во время работы приложения. Однако, если вам действительно нужно присвоить свойство (props) компонента (например, для использования в методах жизненного цикла), то вы можете сделать это в методе жизненного цикла componentDidUpdate().

Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myProp: null
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.myProp !== prevProps.myProp) {
      this.setState({ myProp: this.props.myProp });
    }
  }

  render() {
    return (
      <div>
        {/* ... */}
      </div>
    );
  }
}

В этом примере мы сначала инициализируем состояние компонента myProp значением null в конструкторе. Затем мы используем метод componentDidUpdate() для обновления состояния myProp при изменении свойства myProp. Если свойство myProp изменилось, мы вызываем метод setState(), чтобы обновить значение myProp в состоянии компонента.

Обратите внимание, что в данном случае мы должны сравнивать this.props.myProp с prevProps.myProp, чтобы определить, изменилось ли свойство. Если мы будем использовать this.props.myProp напрямую в setState(), то это может привести к бесконечному циклу перерисовки компонента, так как вызов setState() приведет к вызову componentDidUpdate() и так далее.

@ciara 

Как пример, присвоим значение свойства myProp состоянию myState в методе componentDidUpdate:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState: ''
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.myProp !== prevProps.myProp) {
      this.setState({ myState: this.props.myProp });
    }
  }

  render() {
    return (
      <div>
        {/* ... */}
      </div>
    );
  }
}

Здесь мы сначала инициализируем состояние myState пустым значением в конструкторе. Затем в методе componentDidUpdate мы проверяем, изменилось ли свойство myProp, и если да, то мы присваиваем его значение состоянию myState с использованием метода setState.

Обратите внимание, что вместо того, чтобы прямо использовать this.props.myProp в методе setState, мы сравниваем его со prevProps.myProp, чтобы убедиться, что свойство изменилось. Функция setState вызывает render снова, и если мы опять обновим состояние с помощью setState, это может вызвать бесконечный цикл обновления.

Это только один из способов использования свойств в состоянии компонента. Все зависит от конкретной ситуации и требований вашего приложения.