Получить значение состояния по умолчанию, получив данные реквизита - React

Question

Я новичок в react.js. Я хотел бы получить значение по умолчанию состояния following_status, получив props.user.following_status.

Я передаю объект пользователя (user = { following_status: 'following', id:123 }) компоненту ReactionButton. ReactionButton компонент выглядит так:

class RelationButton extends React.Component {

  constructor(props){
    super(props);
    console.log(props.user.following_status) #  undefined!!!

    this.state = {
      following_status: props.user.following_status
    }
...
    render() {
       if (this.state.following_status == 'following') {
         <UnFollowBtn/>
       } else {
         <FollowBtn/>
       }
    }

RelationButton вызван компонентом UserCardHeader.

const UserCardHeader = (props) => {
  const user = props.user;
  return(
    <header className="user-card--full__header">
      <RelationButton user={user}></RelationButton>
    </header>
  )
}

Я не понимаю, почему console.log(props.user.following_status) возвращает undefined. Я гуглил многие сайты, подобные этим:

• Реагировать состояние инициализации компонента из реквизита

• доступ к подпоркам внутри конструктора реагирования

эти ответы предполагают

class FirstComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          x: props.initialX
        };
    }
}

но это не сработало для меня.

Если я добавлю componentWillReceiveProps к кодам выше,

  componentWillReceiveProps(props){
    console.log(props.user.following_status)   #=> "following"
    this.setState({following_status: props.user.following_status})
  }

все работает хорошо. Однако я думаю, что это странное решение и иногда не работает. Почему я не могу получить реквизит объекта в constructor(props) {} разделе?

Answer 1

Без полного кода мы не можем сказать, что не так, но очевидно, что following_status приходит асинхронно к компоненту, и поэтому не доступен сразу в конструкторе.

Чтобы как-то это исправить, вы можете определить, изменились ли реквизиты, и соответственно сбросить состояние в componentDidUpdate.

class RelationButton extends React.Component {

  constructor(props){
    super(props);
    console.log(props.user.following_status) #  undefined!!!

    this.state = {
      following_status: props.user.following_status
    }
  }

  componentDidUpdate(prevProps) {
    if(prevProps.user.following_status !== this.props.user.following_status) {
      this.setState({ following_status: this.props.user.following_status })
    }
  }

  render() {
     // you forgot about return statements :
     if (this.state.following_status == 'following') {
       return <UnFollowBtn/>
     } else {
       return <FollowBtn/>
     }
  }
}