é¦å
ï¼Reactæ¬èº«æ²¡æç¬æçè·åæ°æ®çæ¹å¼ãå®é
ä¸ï¼å°±Reactèè¨ï¼å®çè³ä¸ç¥éææå¡å¨ç»é¢çåå¨ã
Reactåªæ¯ç®åå°æ¸²æç»ä»¶ï¼åç¬ä»ä¸¤ä¸ªå°æ¹è·åæ°æ®ï¼props å stateã
å æ¤ï¼ä¸ºäºä½¿ç¨æå¡å¨çæ°æ®ï¼ä½ éè¦å¨ä½ çç»ä»¶ï¼componentï¼çpropsæstateéæ¿å°æ°æ®ã
ä½ å¯ä»¥å°è¿ä¸ªè¿ç¨ä¸æå¡åæ°æ®æ¨¡åå¤æåï¼å°±åä½ æå¸æçé£æ ·ï¼ä½æç»åªæ¯ç»ä»¶æ¸²æpropsåstateã
éæ©ä¸ä¸ªHTTP åº
为äºè·åæ¥èªæå¡å¨çæ°æ®ï¼ä½ éè¦ä¸ä¸ªHTTPåºï¼ç½ä¸æå¾å¤ï¼æç»ä»ä»¬é½ååæ ·çäºæ
ï¼ä½ä»ä»¬æä¸åçç¹ç¹ã
å欢 Promiseï¼é£å°±éaxioså§ï¼mzabriskie...
讨åPromise?ï¼ä½æ¯å欢callbackï¼ä¸å¦¨ççsuperagent
å½ç¶ï¼ä½ ä¹å¯ä»¥éæ©èªå·±å°è£
ä¸ä¸ªajaxåºï¼æå欢Axiosï¼ä¸é¢å°ä»¥è¿ä¸ªåºä½ä¸ºä¾åï¼å¦æä½ ä¸å欢ï¼å¯ä»¥éæ©å
¶ä»åºççã
Fetch Data
å¦ä¸æ¯ä¸ä¸ªç®åçå®ä¾ï¼ä¸ä¸ªç»ä»¶ä»subredditè·åèä½ãççè¿ä¸ªä¾åï¼æ们å°ä¼äºè§£å®æ¯å¦ä½å·¥ä½ç
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class FetchDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
axios.get(`r/${this.props.subreddit}.json`)
.then(res => {
const posts = res.data.data.children.map(obj => obj.data);
this.setState({ posts });
});
}
render() {
return (
<div>
<h1>{`/r/${this.props.subreddit}`}</h1>
<ul>
{this.state.posts.map(post =>
<li key={post.id}>{post.title}</li>
)}
</ul>
</div>
);
}
}
ReactDOM.render(
<FetchDemo subreddit="reactjs"/>,
document.getElementById('root')
);
å®æ¯å¦ä½å·¥ä½çï¼
é¦å
ï¼æ们å°axios åºimportè¿æ¥ã
ç¶åå¨constructor éå
è°ç¨superï¼æ¥çåå§åstateï¼è®©å®æ¥æä¸ä¸ªposts空æ°ç»ã
componentDidMountæ¯å
³é®æå¨ï¼è¿ä¸ªæ¹æ³å°ä¼å¨ç»ä»¶æå
¥DOMç第ä¸æ¶é´æ§è¡ã该æ¹æ³å¨æ´ä¸ªç»ä»¶ççå½å¨æåªä¼æ§è¡ä¸æ¬¡ã
å®ä½¿ç¨axios.getæ¹æ³ä»subredditè·åæ°æ®ï¼åå¼å·çå符串æ¯ES6ç模æ¿å符串ï¼${}é¨åæ¯ç±è¡¨è¾¾å¼çå¼æå代ï¼æ以URLä¼ éç»axios.getå®é
ä¸æ¯r/react...ã
æ两ç¹ä½ éè¦æ³¨æçæ¯ï¼
ä½ å¯ä»¥å¨ä»»æçsubreddit URLæ«å°¾å¤éå ä¸.json并ä¸è·å¾é£ä¸ªèä½çjsonå½¢å¼çå±ç¤º
å¦æä½ å¿è®°wwwï¼ä½ ä¼å¾å°ä¸ä¸ªCORSé误
å 为Axios使ç¨Promiseï¼æææ们å¯ä»¥é¾å¼è°ç¨thenæ¹æ³æ¥å¤çresponseãè·åçèä½ä¿¡æ¯æ¯ä¸ç¹ä¸ç¹ç转æ¢åæåçï¼æéè¦çä¸ç¹æ¯ï¼ç»ä»¶çç¶æ(state)æ¯ç±èä½ä¸æ°æ°ç»è°ç¨this.setStateæ´æ°çï¼ç±æ¤è§¦åä¸ä¸ªéæ°æ¸²æï¼ç¶åèä½çä¿¡æ¯å°±å¯ä»¥çè§äº
温馨提示:答案为网友推荐,仅供参考