默认情况下，将属性传递给子组件的记录为false

Question

我不知道如何指定标题。

这是我的问题：

我有一个父组件，它将默认状态作为属性传递给某个子组件。

其中一个默认状态传递如下：

<FriendButton is_friend={this.props.is_friend} />

FriendButton位于父级的子组件中，这就是为什么它是this.props

所以这就是我想传递给<FriendButton />：

this.props.is_friend == true

所以现在在我的<FriendButton />组件中我想处理这个值。奇怪的是，它被记录为“false”。

这是我检查的简单代码：

import React from 'react';

class FriendButton extends React.Component {
  constructor(){
    super();

    this.state = {
      friend_status: ""
    }
  }
  componentWillMount(e){
    console.log("Friend status at friend button: ",this.props);
    if(this.props.is_friend){
      this.setState({
        friend_status: "Friend"
      });
    }else{
      this.setState({
        friend_status: "Friend request"
      });
    }
  }
  render() {
    return(
      <button className="friend-request-button">{this.state.friend_status == "Friend" ? <i className="fa fa-check"></i> : <i className="fa fa-user-plus"></i>}{this.state.friend_status}</button>
    );
  }
}

export default FriendButton;

现在您可以看到我正在props中记录componentWillMount()，我收到的记录是：Friend status at friend button: Object {is_friend: false}

当我在GoogleChrome React Tools中检查我的组件时，我可以清楚地看到此属性设置为true，如下图所示。

以前从未发生过这种情况 - 我在这里可能缺少什么想法？

Answer 1

由于componentWillReceiveProps(props){}过早被解雇，因此无法接收正确的属性值，因此无法正确更新状态。

使用 componentWillReceiveProps(props){ console.log("Props: ", props); if(props){ var friend_status = "Friend"; }else{ var friend_status = "Friend request"; } this.setState({ is_friend: props, friend_status: friend_status }); } 生命周期让我实现了我想要的目标。

以下是关于我如何使用该功能的示例代码：

foreach($queryBuilder->getParameters() as $key=>$value){
   $queryBuilder->setParameter($key,null);
}

这对我有用。