React获取数据并展示

这里获取的不是服务器的而是本地的数据，但是原理相同

在src统计目录下创建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检测是否安装成功

终端输入json-server mock/data.json -p 3003，开启本地服务器

屏幕快照 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);
      });
  };

浏览器调试台打印如下

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

此时组件内部的state已经改变，说明数据已经被获取，之后就可以通过this.state.area展示在页面了，如下

<Select showSearch placeholder="please select">
              {this.state.area.map(areas => 
                <Option value={areas}>{areas}</Option>
                )}
            </Select>

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