请教关于fetch

#1

初学react,在学习服务端渲染,用的isomorphic-fetch这个package。

`

componentWillMount() {
	console.log("in componentWillMount");
	let THIS = this;

	fetch('/build/msg.json').then(function(res){
		if (res.ok) {
			res.json().then(function(data) {
				console.log(data.message);
				THIS.state = {message: data.message};
			});
		}
	}, function(e){
		console.log("error", e)
	});

	console.log("in componentWillMount End");
}

`

我是这样做的,但是在fetch结果返回之前,页面就渲染完了。

请问正确的写法是什么,搜索了半天也没学明白,才来发帖

#2

在componentDidMount中呢??

#3

THIS.state = {
    message: data.message
};

改成

THIS.setState({
    message: data.message
});

试试看

#4

2楼 +1,setState会重新渲染组件,(永远不要直接修改state)
另外,如果你需要整个组件的渲染都在请求之后的话,需要promise,react有好多相关库,可以使用

#5

哎呀这么低级的错误,我学习的时候特意记下了这个用法,结果试着写的时候还是忘记了,谢谢

#6

谢谢,改了之后出现了这个warning

setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server

我猜应该是没用promise的原因吧,promise我也不太懂,还得继续学,谢谢啦

#7

componentDidMount 不能用在服务端渲染,执行不到这个函数

#8

不对,也没渲染上,我再研究研究

#9

能介绍一个比较好的promise库嘛

#10

如果用ES6规范的话 他自带Promise的
可以看 Promise-MDN
如果不用 ES6规范的话 可以用 es6-promise
学习Promise可以看 JavaScript Promise迷你书(中文版)

#11

推荐使用ES6的箭头函数,避免this引用混乱:

somePromise.then(data => {
  this.setState(...);
}

promise推荐用bluebird,功能完善,兼容好,就是有点大……

#12

用relay多好