热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

请教useAxios(ReactHooks)的一个使用问题

测试代码大概是这样的

测试代码大概是这样的



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const OperatiOnButtons= ({record,}) => {

  const [{ data, loading, error}, refetch] = useAxios('http://www.baidu.com', {'manual': true});

  return (

   

     
        OnClick={() => {

          Dialog.confirm({

            title: "Confirm",

            content: 'Do you want to send request?',

              onOk: () => {

                refetch();

                if (error) {

                  console.log(error);

                }

                else {

                  console.log(data);

                }

              }

          });

        }}

      >

        Request

     

   


  )

}



const TestTable = () => {

  const [{data, loading, error}, refetch] = useAxios('http://data.cdc.gov/data.json');

  return (

   
      dataSource={data?.dataset}

      loading={loading}

      columns={[

        {

          title: 'title',

          dataIndex: 'title',

        },

        {

          title: 'identifier',

          dataIndex: 'identifier',

        },

        {

          title: 'operations',

          cell: (value, index, record) => (

           

          )

        }

      ]}

    />

  );

};

这里调用了一个公开数据集 ( http://data.cdc.gov/data.json) 来渲染一个表格 (TestTable),表格渲染是正常的。表格的第三列里有一个按钮,按下后会弹出一个确认对话框,点击 Ok 后,会发第二个请求。

现在我想做的,是判断第二个请求成功与否,分别弹出一个成功对话框和失败对话框。



因为这个文件是函数式组件,所以第二个请求也想使用 useAxios 来实现。现在如果打开浏览器的 CORS,第二个请求确实发出去了,但是现在判断逻辑有问题,始终输出 undefined

请问这种情况下,第二个请求可以使用 axios-hooks 实现吗?如果可以,代码要如何调整呢?

没用过这个,我感觉你是对 hooks 不理解。
OperationButtons 里 refetch 是异步的,异步调用然后才根据数据变化执行 render,那这时候你 取 error 和 data 肯定获取不到 hooks 更新的信息对吧? 你看看可以加个 useEffect 监听 data 搞定。


   



推荐阅读
  • 使用nodejs爬取b站番剧数据,计算最佳追番推荐
    本文介绍了如何使用nodejs爬取b站番剧数据,并通过计算得出最佳追番推荐。通过调用相关接口获取番剧数据和评分数据,以及使用相应的算法进行计算。该方法可以帮助用户找到适合自己的番剧进行观看。 ... [详细]
  • React项目中运用React技巧解决实际问题的总结
    本文总结了在React项目中如何运用React技巧解决一些实际问题,包括取消请求和页面卸载的关联,利用useEffect和AbortController等技术实现请求的取消。文章中的代码是简化后的例子,但思想是相通的。 ... [详细]
  • 本文详细介绍了GetModuleFileName函数的用法,该函数可以用于获取当前模块所在的路径,方便进行文件操作和读取配置信息。文章通过示例代码和详细的解释,帮助读者理解和使用该函数。同时,还提供了相关的API函数声明和说明。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • t-io 2.0.0发布-法网天眼第一版的回顾和更新说明
    本文回顾了t-io 1.x版本的工程结构和性能数据,并介绍了t-io在码云上的成绩和用户反馈。同时,还提到了@openSeLi同学发布的t-io 30W长连接并发压力测试报告。最后,详细介绍了t-io 2.0.0版本的更新内容,包括更简洁的使用方式和内置的httpsession功能。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • 图像因存在错误而无法显示 ... [详细]
  • Gitlab接入公司内部单点登录的安装和配置教程
    本文介绍了如何将公司内部的Gitlab系统接入单点登录服务,并提供了安装和配置的详细教程。通过使用oauth2协议,将原有的各子系统的独立登录统一迁移至单点登录。文章包括Gitlab的安装环境、版本号、编辑配置文件的步骤,并解决了在迁移过程中可能遇到的问题。 ... [详细]
  • CentOS7.8下编译muduo库找不到Boost库报错的解决方法
    本文介绍了在CentOS7.8下编译muduo库时出现找不到Boost库报错的问题,并提供了解决方法。文章详细介绍了从Github上下载muduo和muduo-tutorial源代码的步骤,并指导如何编译muduo库。最后,作者提供了陈硕老师的Github链接和muduo库的简介。 ... [详细]
  • 本文讨论了将HashRouter改为Router后,页面全部变为空白页且没有报错的问题。作者提到了在实际部署中需要在服务端进行配置以避免刷新404的问题,并分享了route/index.js中hash模式的配置。文章还提到了在vueJs项目中遇到过类似的问题。 ... [详细]
  • ps:写的第一个,不足之处,欢迎拍砖---只是想用自己的方法一步步去实现一些框架看似高大上的小功能(比如说模型中的toArraytoJsonsetAtt ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 程序员_阿里Antd藏圣诞节彩蛋 程序员被离职
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了阿里Antd藏圣诞节彩蛋程序员被离职相关的知识,希望对你有一定的参考价值。 ... [详细]
  • ReactJSUIAnt设计空组件原文:https://w ... [详细]
author-avatar
雪盈甜美
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有