Как правильно пробросить пробросить props в state?

Question

[Павел Диденко]

Как правильно пробросить props в state?
Я использую синтаксис полей классов и делаю это так:

state = {
  text: this.props.text
};

Тут услышал мнение от одного разраба, что это неправильно, типа "this должен находиться внутри не статического метода" и нужно инициализировать в конструкторе. Он прав? state каким боком к этому относится, это же не метод?

Comments

[Петр Мухуров]

getDerivedStateFromProps

[Павел Диденко]

Петр Мухуров, это вроде не про это

[Петр Мухуров]

Павел Диденко, универсальный способ синхронизировать state и props, а если речь про инициализацию, то да

class ... {
  state = {
    anyProp: this.props.anyProp
  }
  ...
}

Answer 1

[Mikhail Osher]

Тут услышал мнение от одного разраба, что это неправильно, типа "this должен находиться внутри не статического метода" и нужно инициализировать в конструкторе. Он прав?

Всё верно. Только он не понимает, что такая запись не является статической, и после транспайла окажется в конструкторе.

Comments

[ned4ded]

добавлю, что это синтаксический сахар, называемый class property initializer, чтобы не писать 100500 раз
this.something = something в конструкторе класса; и это не реакт, а бабель.

[Павел Диденко]

ned4ded, что это бабель знаю, не знал во что именно он компилит

[Mikhail Osher]

Павел Диденко, babel repl примерного выхлопа (только там уберите галочку env preset, ибо тупит ссылка :()

Answer 2

[Роман Александрович]

constructor(props){
super(props)
this.state={
  text: this.props.text
}
}

это как должно быть. Но если работает и ваш метод то почему бы его не использовать ?))))

Comments

[Павел Диденко]

Почему "должно быть"? Вопрос подразумевает наличие аргументов. Просто работает и почему бы не использовать - не правильный подход, нужно делать качественно, а не лишь бы работало

Answer 3

[Марат Нагаев]

Вообще классы такое себе, есть React Hooks. Там нет необходимости писать this в принципе.

Comments

[Павел Диденко]

Кто сказал, что такое себе?

Answer 4

[real2210]

Вообще по логике нужно использовать props напрямую, в стейте хранитсе только то, что может поменяется в процессе работы самого компонента при таких же props

Comments

[Павел Диденко]

Бывают случаи, когда начальное состояние пробрасывается из пропсов