请求了2次api

Question

已经禁用了 // <React.StrictMode>
当我在第3页时, 点击搜索按钮, 会触发两次api请求

import { useEffect, useState } from 'react'
import { Card, Button, Form, Input, Select, Space, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import type { User as IUser } from '@/types/api'
import api from '@/api'
import { formatState, formatDate } from '@/utils'

const { Option } = Select

export const User: React.FC = () => {
  const [form] = Form.useForm()
  const [data, setData] = useState<IUser.UserItem[]>([])
  const [pageNum, setPageNum] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [total, setTotal] = useState(0)
  useEffect(() => {
    getUserList({ pageNum, pageSize })
  }, [pageNum, pageSize])

  const getUserList = async ({ pageNum = 1, pageSize = 10 }: IUser.Params) => {
    const result = await api.getUserList({
      ...form.getFieldsValue(),
      pageNum,
      pageSize,
    })
    // 目前只有一条数据, 测试代码
    const list = Array.from({ length: 50 }).map(() => ({
      ...result.list[0],
      userId: Math.random(),
    }))
    setData(list)
    setTotal(list.length)
    setPageNum(result.page.pageNum)
    setPageSize(result.page.pageSize)
  }

  const onFinish = () => {
    // 老师好, 我自己用此方法解决的, 不知道好不好
    pageNum === 1 ? getUserList({ pageNum: 1, pageSize }) : setPageNum(1)
  }

  const onReset = () => {
    form.resetFields()
    onFinish()
  }

  const columns: ColumnsType<IUser.UserItem> = [
    {
      title: '用户ID',
      dataIndex: 'userId',
    },
    {
      title: '用户名称',
      dataIndex: 'userName',
    },
    {
      title: '用户邮箱',
      dataIndex: 'userEmail',
    },
    {
      title: '角色',
      dataIndex: 'role',
      render: (role: number) =>
        ({
          0: '超级管理员',
          1: '管理员',
          2: '体验管理员',
          3: '普通用户',
        })[role],
    },
    {
      title: '在离职',
      dataIndex: 'state',
      render: formatState,
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      render(createTime: string) {
        return formatDate(createTime)
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="text" onClick={() => console.log('record@@', record)}>
            编辑
          </Button>
          <Button type="text" danger onClick={() => console.log('_@@', _)}>
            删除
          </Button>
        </Space>
      ),
    },
  ]

  return (
    <>
      <Card>
        <Form layout="inline" form={form} initialValues={{ state: 1 }} onFinish={onFinish}>
          <Form.Item name="userId" label="用户ID">
            <Input placeholder="请输入用户ID" />
          </Form.Item>
          <Form.Item name="userName" label="用户名称">
            <Input placeholder="请输入用户名称" />
          </Form.Item>
          <Form.Item
            name="state"
            label="在离职"
            style={{ width: 260 }}
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择用户在离职状态">
              <Option value={0}>所有</Option>
              <Option value={1}>在职</Option>
              <Option value={2}>离职</Option>
              <Option value={3}>试用期</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button htmlType="button" onClick={onReset}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      <Table<IUser.UserItem>
        style={{ marginTop: 20 }}
        rowKey="userId"
        rowSelection={{ type: 'checkbox' }}
        bordered
        title={() => (
          <div className="space-between">
            <div>用户管理</div>
            <Space>
              <Button type="primary" onClick={() => console.log('增加')}>
                增加
              </Button>
              <Button type="primary" danger ghost onClick={() => console.log('批量删除')}>
                批量删除
              </Button>
            </Space>
          </div>
        )}
        columns={columns}
        dataSource={data}
        pagination={{
          current: pageNum,
          pageSize,
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共计${total}条`,
          onChange(current, pageSize) {
            setPageNum(current)
            setPageSize(pageSize)
          },
        }}
      />
    </>
  )
}

Answer 1

河畔一角 2023-10-11 23:30:37

点击搜索的时候，你只需要把pageNum设置为1就行了，不需要调用getUserList，因为useeffect里面添加了依赖，pageNum变化，会自动触发接口调用。

• 提问者 王鹳厶 #1

  但这样我在第1页的时候, 就搜索不了了, 因为pageNum没有改变, 但 form 内容(userId, userName)可能会变

• 河畔一角 回复 提问者 王鹳厶 #2

  好像是，忽略了。我忘了课程是怎么做的了。那你上面的方案看起来没问题。

• 提问者 王鹳厶 回复 河畔一角 #3

  好的谢谢老师, 您回复真快

Answer 2

慕函数3090423 2025-02-04 01:56:00

我也遇到了同样的问题，我认为是

const getUserList = async (params: PageParams) => {

const values = form.getFieldsValue()

const data = await api.getUserList({

...values,

pageNum: params.pageNum,

pageSize: params.pageSize

})

这里传递参数的时候要传递pageNum而不是PageNumber，修改了就好了

• 河畔一角 #1

  你这个写法跟课程源码是一样的

Answer 3

河畔一角 2023-10-11 23:14:39

猜测是useeffect的问题

Answer 4

河畔一角 2023-10-11 23:14:14

这个要上代码截图才能分析。

• 提问者 王鹳厶 #1

  老师好, 这个提问不支持gif图片, 我又编辑了问题, 上传了代码