Hook 下 useEffect 进行异步请求数据操作 （ajax+Layui）

• 背景
  近期进行了对 【 React JS （Hook） 】的一番摸索
  作为技术涉猎的后端开发 PHPer ，难免会有更多的坎坷
  在此只作为了一部分的【React - useEffect】技术的应用

    需求：
  		进入商品添加页面时，初始化时，通过 AJAX 异步获取 "分类数据";
  		然后在下拉列表中显示分类信息
  

• 鄙人使用的是 【浏览器支持模式】,则需要引入 js 文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• 核心处理代码如下：

const [catList,setCatList] = React.useState([]);
React.useEffect(()=>{
    // TODO async/await让异步代码看起来,表现更象同步代码;
    async function queryData(){
        const toUrl = "{:url('cms/goods/ajaxGetNormalCatList')}";
        const result = await axios.post(toUrl);
       	return result.data.data;
    };
    queryData().then(data=>{
		setCatList(data);
        // 注意，Layui 需要数据变动后再次渲染才可展示数据
        layui.form.render();
	});
},[])

注意：

因为选用的是Layui 前端框架，所以只有调用" layui.form.render();", 下拉列表中的数据才会显示哦！
ajax 请求选用的是 【axios】，主要是为了代码量的减少;
根据自己的需要也是可以使用 $.post（） 等等的原生 ajax 请求方式

参考文章:

• 【 axios 中文网】
• 【 Axios和(async,await) 介绍一番】