第四课：列表获取

[aspirantzhang]

本节学习手册：https://www.yuque.com/aspirantzhang/antdprov5/zwx8s6

本节代码
841af2c?branch=841af2cabb54a8c4edc711fdc41c28457c3908f6&diff=split

请发与本节课有关的讨论。

[jjkbb123]

想问一下 老师这样的请求会导致每次切换页面都会发送请求
有没有什么优化可以使已经获取到的数据不要重复请求呢？

[aspirantzhang]

切换页面重新获取数据应该是正确的逻辑，这样可以确保数据是最新的，好像不应该把数据缓存下来。

[h2appy]

useRequest有缓存功能，如果设置了 options.cacheKey ， useRequest 会将当前请求结束数据缓存起来。下次组件初始化时，如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求，也就是 SWR 的能力。

参考：
https://hooks.umijs.org/zh-CN/hooks/async#缓存--swr

[bruce-zhang932]

老师您好，为什么您本地请求https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY=antd，不会报跨域的问题呢？是进行了什么设置吗？

[aspirantzhang]

是的，后端进行了跨域设定。在第十六节“跨域代理”课中会讲到。

[CMG-CEO]

当columns={init?.data?.layout?.tableColumn}只写到这里时，表格渲染不出来，并且报错。好几个错误
ncaught Error: Objects are not valid as a React child (found: object with keys {id, parent_id, name, create_time, update_time, delete_time, status, pivot}). If you meant to render a collection of children, use an array instead.

[CMG-CEO]

必须把后续的filter写完，才不报错

[CMG-CEO]

报错？
Warning: Each child in a list should have a unique "key" prop.
Check the render method of Body.

[space-tu]

ant design table 组件传入数据问题，需要传入一个rowKey

<Table
  rowKey="id"
  dataSource={init?.data?.dataSource}
  columns={(init?.data?.layout?.tableColumn || []).filter((item) => !item.hideInColumn)}
  pagination={false}
  loading={init.loading}
/>

[littleprince612]

老师，我使用useRequest报了好几个错，网上也没找到解决方法，麻烦您帮我解答一下，十分感谢！！！
一、使用useRequest报错，说不是一个hooks；
二、使用console.log()报错，说是一个意外的控制台语句；
三、init.data.获取不到后面dataSource的值，而且控制台会打印两次，然后值都是空；当不写init.data.dataSource时，控制台会打印三次，第三次有值，但是不知道怎么取到。我觉得应该是useRequest的问题，找了很久没有找到原因。

[aspirantzhang]

把你的BasicList文件夹打包，发email给我 admin@aspirantzhang.com

[littleprince612]

把你的BasicList文件夹打包，发email给我 admin@aspirantzhang.com

好的，已经发过去了，谢谢老师

[aspirantzhang]

1. 把这个组件的名字从index改成Index，也就是I大写
2. 黄色叹号的报错，是警告级别，暂时不管，不影响。
3. 这个是正常的。从你的代码来看，使用useRequest的方法正确，现在列表没有显示任何内容，主要是table的column没有写对。仔细看完本节课程代码，column这部分应该是

<Table
  dataSource={init?.data?.dataSource}
  columns={init?.data?.layout?.tableColumn.filter((item) => item.hideInColumn !== true)}
  pagination={false}
/>

你写的是：

columns={init?.data?.layout?.datable}

这个datable是不对的，所以永远不会正常显示数据。

关于打印init，结果出现三次输出，最后一次dataSource有值。这个也是正确的现象。
React这个东西它有很多渲染。
页面进来以后，先看到了init，就开始进行useRequest获取，但useRequest是异步的。没等它获取到数据。react继续执行下一条语句了，就是console.log(init)，这时候打印的dataSource就是空，根本还没获取到。
随后，继续一条一条执行，执行到return，开始渲染Table组件

        <Table
          dataSource={init?.data?.dataSource}
        />

这时候，dataSource没有，空的，所以不动。

直到，useRequest终于获取到数据了。就是你看到最后一次，dataSource有值了。这时候，才真正进行了赋值。

这个流程是正确的，也就是说，这过程中各种东西造成它页面多次渲染，每次渲染都执行了console.log()，所以你看到多次打印。

[littleprince612]

哇，真的太感谢老师了，问题已经解决(^▽^)

[qqjay2017]

分页组件的onChange可以在分页和size切换的时候都会调用,不用onShowSizeChange

[aspirantzhang]

确实，这个更方便了。感谢反馈。

[JinChentestin]

使用useRequest,一个接口返回格式为[{"key":"value"}]就接收不到，{"data": [{"key":"value"}]},后面这种格式就能接收到，不知道为啥 (o^^o)

[aspirantzhang]

在umi里的useRequest就是这么设计的，它约定了一个格式，默认返回data中的内容：
https://umijs.org/plugins/plugin-request
可以在用useRequest的时候加一个配置项来解决这个问题，后面课程中会提到。

{
      formatResult: (res: any) => {
        return res;
      },
}

[shangrilaxie]

您好，我这边也是获取不到数据。但是直接通过浏览器是可以获取数据的。
const init = useRequest('https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY');

{searchLayout()}

{beforeTableLayout()}

    {afterTableLayout()}
  </Card>
</PageContainer>

浏览器检查：查询响应结果是{"success":false,"message":"Your session has expired, please log in again."}

[aspirantzhang]

网址有错误。
X-API-KEY=antd

[shangrilaxie]

现在index.tsx如下：
import React from 'react';
import { Table, Row, Col, Card, Button, Pagination, Space } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import styles from './index.less';
import { useRequest } from 'umi';

const index = () => {
const init = useRequest('https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY=antd');
console.log(init);

。。。
return (

);
};
export default index;

但是页面直接报错：
Something went wrong.
Objects are not valid as a React child (found: object with keys {id, parent_id, name, create_time, update_time, delete_time, status, pivot}). If you meant to render a collection of children, use an array instead.

[aspirantzhang]

发的代码没什么问题，这个报错是一个比较低级的问题，自己研究一下先，如果实在想不明白再贴详细代码。

[shangrilaxie]

谢谢。我把代码重新整理一遍后，OK了。

[LCZQY]

所有的计算和数据组合都交了接口？ 接口的管理是服务端完成的吗 ？ 会不会造成多余的压力？ 这是一种思想吗？

[aspirantzhang]

1. 大多数[需要准确结果的、需要存储在数据库中]的计算都应该让服务器端完成，前端主要负责的是UI界面的展现。比如说，购物车，商品总价，不能前端计算，因为前端js一般跑在用户浏览器中，用户可以修改。所以商品总价、折扣、最终成交价格肯定是后端计算，通过一系列的校验，算好后通过接口返回给前端。前端完成展现。
2. 接口就是后端程序联合服务器端、云端一系列应用程序共同完成，最后返回给前端的。他们会负责优化请求处理效率。压力肯定是有，但是在所难免。
3. 并不是说，接口传来的数据，前端就直接能用了。很多时候用不了，前端需要做数据的整理。后续课程中会讲到。

[LCZQY]

好的

[lansejiyin]

老师你的后端不是已经处理跨域了吗，为什么我请求时仍然后跨域的问题

[aspirantzhang]

用 http://localhost:8000 访问，接口只允许这个地址跨域。

[lansejiyin]

可以正常请求了，多谢老师

[HasiKi]

老师 用useRequest调用我们的接口 为什么data一直都是undefined呢 network上接口都是正常返回值了的

[HasiKi]

老师 大概是哪堂课提到过

[aspirantzhang]

第11节，从1:22:30开始

[HasiKi]

这堂课么？好像没有呢

[aspirantzhang]

对，我刚找的，也看了，确定在1:22:30附近

[easyitlife]

老师 用useRequest调用我们的接口 为什么data一直都是undefined呢 network上接口都是正常返回值了的

用useRequest调用我们的接口 为什么data一直都是undefined呢 network上接口都是正常返回值了的

可以在config/config.ts中配置数据字段，在export default defineConfig里面增加如下内容：
request: {
dataField: '',
},
这样可以把所有数据返回都放在dada字段中。非标准返回数据的服务器（比如开源的运维监控系统zabbix以及vcenter服务器，我们修改不了数据的返回格式）

[HasiKi]

老师，麻烦问一下，UseRquest 有什么方式处理调用接口的错误信息么，按状态码，最好是全局处理那种

[aspirantzhang]

在后续课程中会讲到，在第九课：弹窗优化中。

[easyitlife]

我现在遇到一个useRequest请求的问题，就是我有一个zabbix服务端的接口，第一步需要先通过用户名密码获取到用户sessionid（图一的sessionId代码已可以获取到sessionid的值，并打印到控制台）,第二步再用sessionid去获取接口信息（图二init的代码的auth后面加上获取到的sessionid值即sessionId?.data?.result ）。这两步单独执行都可以正常获取到返回的数据。
但是我想把这两步我放在同一个页面里面的话（manual 手动调用我都关掉了），怎么能实现第二步先执行，根据返回的结果（如果sessionid超期，结果会提示错误）判断是否要执行第一步先获取sessionid值？然后再赋值并更新第二步的auth对应的值？

[aspirantzhang]

后面会讲到，useRequest可以在这个页面里判断和接收返回结果，有一个onSuccess和onError的配置 (

antdprov5/src/pages/BasicList/index.tsx

Line 78 in 8c3c609

onSuccess: (data: BasicListApi.Root) => {

)
可以根据返回结果，决定后续的执行。

[easyitlife]

非常感谢提示！已成功实现功能，并获取到数据，代码如下，不知代码是否可以，还望张老师给予指点。
步骤如下：
1、根据第二个useRequest 的onSuccess 检测返回结果，并判断是否执行第一个useRequest请求以获取session，
2、用useState 更新sessionid的值，第二个useRequest请求的auth字段赋值用sessionid
3、用useEffect检测sessionid是否变化以重新调用第二个useRequest重新获取数据。
以下代码功能实现的是通过Zabbix提供的API接口，用useRequest实现数据请求。
import { useRequest } from "umi";
import { useState, useEffect } from 'react'

const Index = () => {
const [sessionid, setSessionid] = useState('')
const sessionId = useRequest(() => {
return {
url: 'http://xxx.com/api_jsonrpc.php',
method: 'post',
data: {
"jsonrpc": "2.0",
"method": "user.login",
"params": {
"user": "XXX",
"password": "XXX"
},
"id": 1,
"auth": null
}
}
},
{
manual: true,
onSuccess: (data) => {
if (data.result)
setSessionid(data?.result)
},
formatResult: (res: any) => {
return res;
},
}
)

const init = useRequest((sessionid) => {
return ({
url: 'http://xxx.com/api_jsonrpc.php',
method: 'post',
data: {
"jsonrpc": "2.0",
"method": "host.get",
"params": {
"output": [
"hostid",
"host"
],
"selectInterfaces": [
"interfaceid",
"ip"
]
},
"id": 2,
"auth": sessionid,
},
}
)
},
{
manual: false,
onSuccess: (data: any) => {
if (data?.error?.code === -32602) {
sessionId.run()
}
},
formatResult: (res: any) => {
return res;
},
}
)

useEffect(() => {
init.run(sessionid)
}, [sessionid])

console.log(init);

return (

OK

)
}

export default Index

[aspirantzhang]

#4 (reply in thread)

[Percy0601]

✖ 8:27 React Hook "useState" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
✖ 9:34 React Hook "useState" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
✖ 10:16 React Hook "useRequest" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
✖ 14:3 React Hook "useEffect" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with
the word "use". react-hooks/rules-of-hooks

使用最新版代码时候在这章节出现lint问题，求回复解决

[aspirantzhang]

肯定是一个低级错误，检查index开头字母I是不是小写了，这个必须大写。
如果不是这个问题， 把Index组件完整代码发一下

[Percy0601]

感谢回复指导，确实是组件拼写时候index => Index就可以了，继续后续章节。

[komqi]

老师您好我想问一下 为什么我设置了data.d.ts 并没有作出限制 init.data.提示出来的包括很多组件名还有各种其他的

[aspirantzhang]

const init = useRequest<{ data: BasicListApi.Data }>
检查一下这里设置<>里面了吗？
然后，鼠标移动到 init 上，看看编辑器给提示的是啥类型。
还不行的话尝试重启编辑器。

[komqi]

好的 我解决了 谢谢~

[komqi]

老师您好能帮我看下 我这里代码检查报错提示空格是什么意思 - -

[aspirantzhang]

就是参数名和类型之间要加空格才符合代码规范
current:any ❌
current: any ✅
这项工作应该交给编辑器来自动格式化，看你的截图中显然没有这么做。建议参考【第一节：编码习惯】，在编辑器中安装Eslint插件，并做一些必要的配置（当按Ctrl+s保存时自动格式化）。

[littleprince612]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[donglm123]

打扰一下，这个问题怎么解决呀

[cobanka]

是请求拦截器加了?Token = 123 导致的，你在浏览器输入网址，后面加上?Token = 123 会得到相同的错误。把RequestErrorConfig.ts中的请求拦截器删除就好了。
// 请求拦截器
// requestInterceptors: [
// (config: RequestOptions) => {
// // 拦截请求配置，进行个性化处理。
// const url = config?.url?.concat('?token = 123');
// return { ...config, url };
// },
// ],

[littleprince612]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[littleprince612]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。