异步获取数据后，进行了一下处理，子组件无法接收到props的值

Question

老师您好，之前提问过，代码不清晰，这次又重新发了一遍：

我想通过在首页在点击不同的新闻后，在详情页的右侧展示同类新闻的图片（例：点的是娱乐类新闻就展示娱乐类行文；国际类新闻就展示国际类新闻）

如图1所示，假设我点击了娱乐，将娱乐处理后，把“yule”赋给了newsType（我在constructor中已经定义好了）；

接下来，如图2所示，我在render方法中{this.state.newsType}，页面可以出现yule的字段，可是，将它赋给了子组件的props.type后，在子组件接收到的值为空！这是为什么呢？应该如何解决呢

Answer 1

Parry 2017-12-18 10:23:03

同学你好，我大概能看出你错误的原因了。

你的获取方法在 componentDidMount 中，此时页面已加载完毕，你再去修改 state 的值，子组件是不会再次渲染的。

你将方法放在

constructor() 或者

componentWillMount()

中测试一下，因为看不到你完整代码，猜测应该是这个原因。

• 提问者 qq_Wonderful_8 #1

  老师您好，无论是换成constructor() 还是 componentWillMount()都没有解决，但是经过我N次的debugger，查谷歌终于找到了错误的原因了，并且也找到了我这个需求的实现方法
  错误原因：
  因为fetch()方法是异步方法，在执行过程中，render()也同时执行，所以这是子组件已经被渲染了，无论怎样处理返回的json都不会再次渲染；
  不知道这样理解对不对，
  
  解决方法:
  我用了路由值的方法 this.props.match.params.realtype 直接在这上面处理，便达到了我想要的效果