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

Question

我遇到了 React 问题，完全卡住了。我有 3 个组成部分：频道作为 parent 和 header，故事作为 children:

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);

如您所见，我有一个 ajax 调用 this.props.getChannels();我把它放在 componentDidMount 中，以确保在渲染之前调用它，然后在我将通道传递给 Header ans story 之后调用它，它们是 children 组件。现在我的问题是当我尝试通过 console.log(this.props.activeChannelList) 在 Header 中访问它时；我得到 0 认为我应该有 5 个频道。更有趣的是，当我尝试访问我在 Stroryboard 中发送的道具时，我可以毫无问题地轻松访问它们。以下是我的 Header:

代码

 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 组件的 componentDidMount 方法中打印值，这个 lifecycle 方法只被调用一次，如果你的 api 响应在渲染之后出现Header，它永远不会打印 5，将控制台放在 render 方法中，这样在任何时候当你得到响应时它都会填充值。

来自文档：

componentDidMount: is invoked immediately after a component is mounted first time. This is where AJAX requests and DOM or state updates should occur.

试试这个 Header Comp，它会打印正确的值：

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

    componentDidMount() {

    }

    render() {
        return (
            <div className="col-xs-12">
               {this.props.activeChannelList}
            </div>
        );
    }
}

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

I can not access the right data of property sent from parent to child component

reactjs

react-redux

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

I can not access the right data of property sent from parent to child component

reactjs

react-redux

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