這里獲取的不是服務(wù)器的而是本地的數(shù)據(jù)蜗巧，但是原理相同
在src統(tǒng)計(jì)目錄下創(chuàng)建mock文件夾沉唠，新建data.json文件
{
"data":[
{
"area":["Jiang Su","Shang Hai"]
},{
"primaryNe":[1,2,3,4,5]
}
]
}
安裝json-server通贞，建議全局安裝
npm install json-server -g
終端輸入json-server -h檢測(cè)是否安裝成功
終端輸入json-server mock/data.json -p 3003，開啟本地服務(wù)器
屏幕快照 2019-08-01 14.53.52.png
打開http://localhost:3003/data仁连，顯示如下
屏幕快照 2019-08-01 14.55.54.png
寫查詢組件中的代碼蓝角，使用FetchAPI
class AdvancedSearchForm extends React.Component {
constructor(props) {
super(props);
this.state = {
area: [],
primaryne: []
};
}
componentDidMount() {
this.fetchData();
console.log(this.state);
}
fetchData = () => {
fetch("../data", { method: "GET" })
.then(res => res.json())
.then(data => {
this.setState({ area: data[0].area,primaryne:data[1].primaryNe });
console.log(this.state);
});
};
瀏覽器調(diào)試臺(tái)打印如下
屏幕快照 2019-08-01 15.00.01.png
此時(shí)組件內(nèi)部的state已經(jīng)改變，說明數(shù)據(jù)已經(jīng)被獲取饭冬，之后就可以通過this.state.area展示在頁(yè)面了使鹅，如下
<Select showSearch placeholder="please select">
{this.state.area.map(areas =>
<Option value={areas}>{areas}</Option>
)}
</Select>
屏幕快照 2019-08-01 15.03.58.png
