通过接收道具数据获取默认状态值 - React

Question

我是 react.js 的新手。我想通过接收 props.user.following_status.

来获得状态 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)returnsundefined。我用谷歌搜索了许多这样的网站：

这些答案表明

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/>
     }
  }
}

通过接收道具数据获取默认状态值 - React

Get default state value by receiving prop data - React

javascript

reactjs

react-props