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

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

1 个答案: