Как правильно рендерить элемент у которого state: this.props.state?

Question

[Ninja Mate]

Столкнулся с проблемой, что если вызывать элемент и назначать в нем в конструкторе state : this.props.state, то все работает первый раз, а потом значения меняются, а для пользователя отображаются прежние.

class UserData extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            id : this.props.id,
...

//value не меняется для пользователя при следующем вызове
<Input value={this.state.id} onChange={(event)=> this.setState({ id: event.target.value })} type="text"/>

//Это реализация (если нужна), но мне кажется, что проблема в коде выше
//кнопка которая рендерит элемент
<UserRow setUserData={()=>that.setUserData( user.id )} row_id={user.id } />
//функция
setUserData(id ){ this.setState({ user_data: <UserData id={id} /> });}

Answer 1

[Никита Гущин]

Вам нужно слушать componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
  this.setState({ id: nextProps.id })
}

Плюс почитайте как не нужно использовать state: https://facebook.github.io/react/tips/props-in-get...

Comments

[Ninja Mate]

Два момента. 1 если использовать this.props.id (что замечательно работает) ко как потом редактировать если setProps уже устарело? Другими словами если

<Input value={this.state.first_name} onChange={(event)=> this.setState({ first_name: event.target.value })} type="text"/>

то как пропсы тут использовать если не назначать их в конструкторе ?
2 componentWillReceiveProps(nextProps) пробовал, но setState не назначает стейтам значения!

componentWillReceiveProps
//Вывожу nextProps.name и тд (все приходит как нужно)
ID = 12
name = test8
first_name = Name
last_name = Last
email = [e-mail]
roles = subscriber

//На рендере вывожу пропсы и стейты
PROPS
Object {avatar: "http://0.gravatar.com/avatar/0dcaa36ec46eeb2d8562bda9bd166c0b?s=96&d=mm&r=g", id: 12, name: "test8", first_name: "Name", last_name: "Last"…}
STATE
Object {id: 12, name: NaN, first_name: NaN, last_name: NaN, email: NaN…}

[Ninja Mate]

А ведь получилось! если стейты в конструкторе задать, то все работает. а если в ComponentWIllMount, то задает один раз и все. (очень странно, но факт)

[Никита Гущин]

Ninja Mate: потому что это не правильно. если вы используете стейт, то необходимо в конструкторе задать изначальное состояние.

[Никита Гущин]

Ninja Mate: props изменять нельзя. И дублировать props в state - плохая затея. Передавайте в компонент функцию onNameChange как prop и вызывайте ее, когда у вас инпут меняется. Тогда родительский компонент сам изменит props.name и передаст вам новые.

[Ninja Mate]

Никита Гущин: а можно ссылку на onNameChange? в гугле не гуглится в доках реакта поиск не находит

[Никита Гущин]

Ninja Mate: не не, я имел ввиду -

<Input value={this.props.id} onChange={this.props.onNameChange} type="text"/>

[Ninja Mate]

Никита Гущин: ну так получается, что в данном случае легче ComponentWIllMount или другом, задать state: props и сам Input не трогать. Или я не прав и так делать лучше?

Answer 2

[Антон Измайлов]

Задавайте изначальный state в ComponentWIllMount, либо сделайте проверку

if(!this.state.id) this.setState({id: this.props.id})

Comments

[Ninja Mate]

мне конструктор получается со стейтами тогда не нужен или их пустыми создавать?

[Антон Измайлов]

Ninja Mate: в конструкторе не надо стейты никогда задавать

[Ninja Mate]

Антон Измайлов: componentWillMount(){} просто после конструктора ставим и он сам выполняется? если так, то почему-то не работает

[Антон Измайлов]

Ninja Mate: https://facebook.github.io/react/docs/component-sp... странно

[Ninja Mate]

Антон Измайлов: да это я видел, ES6 синтаксис использую, но на нем примеры тоже есть...

[Ninja Mate]

Антон Измайлов: а если проверку на рендер ставить, то как тогда писать в поля?

if(this.state.email!==this.props.email) this.setState({email: this.props.email});

[Антон Измайлов]

Ninja Mate: эм, ну эт совсем печальная проверка какая-то. Во время инициации задаете один раз переменные и потом работаете с ними. Такие проверки делать не надо, просто все станет нередактируемо.

[Ninja Mate]

Антон Измайлов: в том то и смысл, что не получается один раз задать... буду искать дальше. спасибо

[Антон Измайлов]

Ninja Mate: Напишите мне в скайп или в вк, постараюсь помочь

[Ninja Mate]

Антон Измайлов: приполз к выводу, что элемент не рендерится больше чем первый раз в родительский элемент, пропсы получает, componentWillMount проходит один раз и все. метод который вызывает обновления стейта делает это один раз.
соль задумки в том, что бы создавать поля 'кнопки', у которых свои стейты, которые они посылают в родительский элемент в виде пропсов другого элемента. как получается, что эта магия творится только однажды я так и не понял, буду рад любой помощи.

[Никита Гущин]

Антон Измайлов: "в конструкторе не надо стейты никогда задавать" - вообще-то в конструкторе как раз таки и задается изначальный стейт.

[Антон Измайлов]

Никита Гущин: а разве не в componentWillMount?

[Никита Гущин]

Антон Измайлов: https://facebook.github.io/react/docs/reusable-com... :

The API is similar to React.createClass with the exception of getInitialState. Instead of providing a separate getInitialState method, you set up your own state property in the constructor.

[Антон Измайлов]

Никита Гущин: действительно, ох и насоветовал я.... мда... прошу прощения :c

[Никита Гущин]

Антон Измайлов: ничего, бывает. Зато теперь будете знать ;)