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

来源：15-3 PC 端详情页面开发（下）

qq_Wonderful_8

2017-12-18

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

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

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

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

写回答

1回答

Parry

2017-12-18

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

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

你将方法放在

constructor() 或者

componentWillMount()

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

qq_Wonderful_8

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

2017-12-18

共1条回复

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发，React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程

相似问题

老师您好，关于收藏文章和获取用户收藏这两个接口，我有一个小小的请求

回答 2

react props没有理解透彻，老师有没有推荐的文章呀

回答 1

老师，评论条数太多了，能不能稍微清理一下？

回答 2

为什么移动版代码和PC端代码不能复用?有什么方法吗?

回答 2

老师 13-5登陆模块开发时点击登录后页面全白拷贝您源码后也是同样的效果

回答 5

打开慕课网App查看更多内容