這里獲取的不是服務(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，開(kāi)啟本地服務(wù)器

屏幕快照 2019-08-01 14.53.52.png

打開(kāi)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)改變，說(shuō)明數(shù)據(jù)已經(jīng)被獲取，之后就可以通過(guò)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