Question

我面临着一个反应问题，我完全陷入困境。我有3个组件：作为父母的频道和作为孩子的标题和故事：

class Channel extends React.Component {
constructor(props) {
    super();
}

componentDidMount() {
        this.props.getChannels();

}

render() {
    return (
        <div>


            <div className="col-xs-12  col-md-8 col-lg-8>
                <div className="row">
                    <Header activeChannelList={this.props.channels.channelsArr}/>
                </div>
                <div className="row">

                    {
                        this.props.channels.channelsArr.map((item, i) =>   <StoryBoard 
                                                                                     newsChanel={item}

                                                                                     key={"storyBoard" + i}
                                                                                    ></StoryBoard>)
                    }
                </div>
            </div>


            <div className="col-xs-12  col-md-2 col-lg-2 color2">.col-sm-4</div>
        </div>

    );
    }
 }
  const mapStateToProps = (state) => {
 return {
    channels: state.channelReducer
    };
  };

   const mapDispatchToProps = (dispatch) => {
   return {
    getChannels: () => {
        dispatch(getChannels());

        }
      };
    };
  export default connect(mapStateToProps, mapDispatchToProps)(Channel);

正如您所看到的，我使用this.props.getChannels（）进行了ajax调用;并且我将它放在componentDidMount中以确保在渲染之前调用它然后在我将通道传递给作为子组件的Header和story之后。现在我的问题是当我尝试通过console.log（this.props.activeChannelList）在Header中访问它时;我认为我应该有5个频道。更有趣的是，当我尝试访问我在Stroryboard中发送的道具时，我可以轻松访问它们而没有任何问题。以下是我的标题代码：

 export class Header extends React.Component {
constructor(props) {
    super();
}



componentDidMount() {

    console.log("dddddddddddddddddddddddddddddddddddddddddd");
    console.log(this.props.activeChannelList);// I get 0 though I should get 5
}

render() {
    return (
        <div className="col-xs-12 header tjHeaderDummy">
            <div className="col-xs-1"></div>

        </div>
        );
       }
       }

我的故事板是：

class StoryBoard extends React.Component {
constructor(props) {
    super();

}
componentDidMount() {


    if(this.props.isFreshLoad ){
        do sth
    }

}



render() {
    return (
        <div>

        </div>
    );
}


 }

 const mapStateToProps = (state) => {
  return {
    stories: state.storyBoardReducer
  };
};

 const mapDispatchToProps = (dispatch) => {
return {
    //some funcs

    }

   };
 };   
 export default connect(mapStateToProps, mapDispatchToProps)(StoryBoard);

有人可以帮忙吗？

Answer 1

在Header组件的lifecycle方法中打印值，这个export class Header extends React.Component { constructor(props) { super(); } componentDidMount() { } render() { return ( <div className="col-xs-12"> {this.props.activeChannelList} </div> ); } }方法只调用一次，如果在呈现标题后得到ur api响应，则永远不会打印5，把控制台放在渲染方法中，以便在你得到响应的任何时候它都会填充值。

来自文档：

componentDidMount：在安装组件后立即调用第一次。这是AJAX请求和DOM或状态更新的地方应该发生。

尝试此Header Comp，它将打印正确的值：

JPanel

我无法访问从父组件发送到子组件的属性的正确数据

1 个答案: