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

泥豆芽儿 MT

发布于 2021-09-06 09:59:37

1.8K0

发布于 2021-09-06 09:59:37

文章被收录于专栏：木头编程 - moTzxx

背景

近期进行了对【 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();
	});
},[])

注意：