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

Posted 2023-03-15

【中文标题】通过接收道具数据获取默认状态值 - React

【英文标题】：Get default state value by receiving prop data - React

【发布时间】：2018-05-01 08:58:07

【问题描述】：

我是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) 返回undefined。我用谷歌搜索了很多这样的网站：

React component initialize state from props

accessing props inside react constructor

这些答案建议

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) 部分接收对象道具？

【问题讨论】：

你必须显示谁在渲染RelationButton

@MilosMosovsky 谢谢我添加到问题中

你能不能尝试在console.log('render')里面RelationButton渲染方法，看看它是否没有被调用两次？也许你做了奇怪的包装或者用户是异步的，因此它在 mount 中不可用，但 componentWillReceiveProps 将在每次道具更新时被调用

显示你如何使用UserCardHeader

@MilosMosovsky 输出是 render render 是的，实际上调用了两次

【参考方案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/>