JS constant question(using React，NextJS，Ant Design)：：const [pageSize，setPageSize] = useState(defaultPageSize);setPageSize不起作用

brccelvz  于 2023-04-30  发布在  React
关注(0)|答案(1)|浏览(466)

问题是：如何打印“页面+新页面：10 + 10”在控制台？
我有一部分代码如下（有点长操作页）

const defaultPageSize = 5;//operateConstants.OP_DEFAULT_ITEM_PAGESIZE;
const MemberManagement: React.FC = () => {
  //table page size dropdown
  const [pageSize, setPageSize] = useState(defaultPageSize);
  useEffect(() => {
    console.log("pageSize changed to " + pageSize);
  }, [pageSize]);

  const derivedPageSize = pageSize * 2;
  console.log("derivedPageSize: " + derivedPageSize);

  const handlePageSizeChange = (newPageSize: number) => {
    setPageSize(newPageSize);
    console.log("page + new page: " + pageSize + " + " + newPageSize);
    message.info("page + new page: " + pageSize + " + " + newPageSize);
    let newPageSize2 = returnV();
    console.log("Using function returnV : " + newPageSize2);
    setPageSize(newPageSize2);
  };

  function returnV(){ return derivedPageSize;}
}
export default MemberManagement;

消息打印“page + new page：5 + 10“当我需要它打印”页+新页：10 + 10”。
因此，我尝试使用useEffect控制台日志，它打印了“pageSize changed to 10”和“derivedPageSize：20”时，我将pageSize值更改为10。
我以为这很容易如果我调用returnV函数返回derivedPageSize，它应该打印更改后的值。但它印着“使用函数returnV：10”当它应该是20时，值没有更新，如handlePageSizeChange [（console_Log_For_PageSize_Change）] (https://i.stack.imgur.com/kQJ1p.png)。我不知道如何在handlePageSizeChange中打印“page+newpage：10 + 10”。
但是，在我的另一个页面（CS页面）中，setPageSize像这样工作得很好，这让人感到困惑。

const defaultPageSize = csConstants.CS_DEFAULT_PAGESIZE;
export default function Tcs() {
  //table page size dropdown
  const [pageSize, setPageSize] = useState(defaultPageSize);
  const handlePageSizeChange = (newPageSize: number) => {
    setPageSize(newPageSize);
  };
};

我问过chat-gpt和Google，useCallback from React，尝试设置Table元素的key=pageSize，以便在pageSize更新时重新呈现，尝试创建一个类似returnV的函数。我想When useState update then map loop is not working in array inside of object in useState. React js也有类似的问题，但是是数组类型。
我认为问题与使用const setPageSize渲染或编译的时间有关，沿着代码大小，但我不知道错误在哪里。所以，如果你知道为什么我不能调用handlePageSizeChange并让setPageSize像我的其他页面（CS）一样重置我的pageSize，请为我解释。

（1）编辑后显示以下可复制代码_____________________

另一个问题是：我认为这与在另一个元素中渲染的元素有关，但在我看来rn、Operate和CSpage的 handlePageSizeChange 看起来几乎相同，但一个工作而另一个不工作。为什么会这样呢？
可复制代码（需要修复：操作页面），（功能：：CS页面）：

（需要修复：：操作页）

'use client';

import React, { useState, useEffect } from 'react';
import { Row, Col, Select, message, Tabs, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import * as styles from '@/constants/styles';

//range-picker

// Profile Information : Item
interface DataProfileType {
  ID: number | string;
  ITEM_NAME: string;
  DATE_OF_ACQUISITION: Date | string;
}

const ProfileInformationData: DataProfileType[] = [];
for (let i = 0; i < 20; i++) {
  ProfileInformationData.push({
    ID: i >= 9 ? 2023 + `${i + 1}` : 2023 + `0${i + 1}`,
    ITEM_NAME: 'name',
    DATE_OF_ACQUISITION:('YYYY-MM-DD-HH-mm-ss'),
  });
}

const ProfileInformation: ColumnsType<DataProfileType> = [
  { title: 'ID', dataIndex: 'ID', align: 'center' },
  { title: 'item', dataIndex: 'ITEM_NAME', align: 'center' },
  { title: 'date', dataIndex: 'DATE_OF_ACQUISITION', align: 'center' },

];

//item data-table pageSize dropdown
const ALIST = {
  "0": "pageSizeSelection",
  "5": "count by 5",
  "10": "count by 10",
  "20": "count by 20"
}
const dropdownList: { [key: string]: string } = ALIST;
const itemPageProps = Object.keys(ALIST).map((key) => ({
  value: Number(key),
  label: dropdownList[key],
  disabled: Number(key) === 0,
}));
const defaultPageSize = 5;

const Operate: React.FC = () => {
  const [pageSize = defaultPageSize, setPageSize] = useState<number>();

  useEffect(() => {
    console.log("pageSize " + pageSize);
  }, [pageSize]);

  const handlePageSizeChange = (newPageSize: number) => {
    setPageSize(newPageSize);
    console.log("page + new page: " + pageSize + " + " + newPageSize);
    message.info("page + new page: " + pageSize + " + " + newPageSize);
  };

  const rowSelection: TableRowSelection<DataProfileType> = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };
  // tab 1
  const InitialSetting = () => {
    return (
      <>
      <Row>
          <Select //
            key={pageSize}
            size="middle"
            value={pageSize}
            options={itemPageProps}
            defaultValue={defaultPageSize}
            onChange={handlePageSizeChange}
            className="w-[150px]"
          />
          </Row>
        <Row>
          <Col span={24}>
            <Table
              rowKey={(record) => record.ID}
              columns={ProfileInformation}
              dataSource={ProfileInformationData}
              rowSelection={rowSelection}
              bordered
              size="middle"
              pagination={{
                showSizeChanger: false,
                pageSize: pageSize,
                position: ['bottomCenter'],
              }}
              className={styles.darkline_t}
            />

          </Col>
        </Row>
      </>
    );
  };

  //tab 2
  const NFTInformation = () => {
    return <>tab 2</>;
  };

  const initialItems = [
    { label: 'defaultTab', key: '1', children: InitialSetting() },
    { label: 'Tab2', key: '2', children: NFTInformation() },
  ];

  const [items, setItems] = useState(initialItems);

  return (
    <>
          <Row gutter={12}>
        <Col span={24}>
          <Tabs defaultActiveKey="1" type="card" size={'middle'} items={items} />
        </Col>
      </Row>
    </>
  );

};

export default Operate;

（功能：：CS page）

'use client';

import React, { useState } from 'react';
import { Space, Select } from 'antd';
import { Col, Row, Table, message } from 'antd';
import type { TableProps} from 'antd';
import type { ColumnsType, SorterResult } from 'antd/es/table/interface';

//data-table orderBy dropdown
const CS_1 = {
  "0": "--",
  "col_key1d": "sort1",
  "col_key5d": "sort1",
  "col_key5a": "sort1",
  "col_key6d": "sort1",
  "col_key6a": "sort1",
};
const CS_2 = {
  "0": "pageSize",
  "5": "5pageSize",
  "10": "10pageSize",
  "20": "20pageSize"
};
const CS_DATA_DROPDOWN1: { [key: string]: string } = CS_1;
const menuProps1 = Object.keys(CS_DATA_DROPDOWN1).map((key) => ({
  value: key,
  label: CS_DATA_DROPDOWN1[key],
  disabled: key === "0",
}));

const CS_DATA_DROPDOWN2: { [key: string]: string } = CS_2;
//data-table pageSize dropdown
const menuProps2 = Object.keys(CS_DATA_DROPDOWN2).map((key) => ({
  value: Number(key),
  label: CS_DATA_DROPDOWN2[key],
  disabled: Number(key) === 0,
}));

//----------------------------------------------------------Default Values
const defaultPageSize = 5;
const defaultOrderBy = "col_key1d";
//----------------------------------------------------------end Default Values
//main
export default function CS() {

  //table order dropdown
  const [orderBy, setOrderBy] = useState(defaultOrderBy);
  const handleOrderByChange = (newOrderBy: string) => {
    setOrderBy(newOrderBy);
    const order = newOrderBy.endsWith("d") ? "descend" : "ascend";
    const col = newOrderBy.substring(0, newOrderBy.length - 1);
    const columnKey = col as keyof DataType;
    setSortedInfo({ columnKey, order });
  };

  //table page size dropdown
  const [pageSize, setPageSize] = useState(defaultPageSize);
  const handlePageSizeChange = (newPageSize: number) => {
    console.log("page + new page: " + pageSize + " + " + newPageSize);
    message.info("page + new page: " + pageSize + " + " + newPageSize);
    setPageSize(newPageSize);
  };
  //----------------------------------------------------------end dropdown

  //----------------------------------------------------------data-table
  const [sortedInfo, setSortedInfo] = useState<SorterResult<DataType>>({
    columnKey: defaultOrderBy.substring(0, defaultOrderBy.length - 1),
    order: defaultOrderBy.endsWith("d") ? "descend" : "ascend"
  });

  const [loading, setLoading] = useState(false);

  interface DataType {
    key: React.Key;
    col_key1: string,
     col_key5: string; col_key6:string;
  }
  const data: DataType[] = [];
  
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      col_key1: `${i} a-`,
      col_key5: `2023-03-14-01-01-01`,
      col_key6: `2023-03-15-01-01-02`,
    });
  }

  const handleChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter) => {
    console.log('Various parameters', pagination, filters, sorter);
    setSortedInfo(sorter as SorterResult<DataType>);
  };
  const columns: ColumnsType<DataType> = [
    {
      title: 'a1',
      dataIndex: 'col_key1',
      key: 'col_key1',
      align: 'center',
      width: 120,
      sortOrder: sortedInfo.columnKey === 'col_key1' ? sortedInfo.order : null,
    },
    {
      title: 'd',
      dataIndex: 'col_key5',
      key: 'col_key5',
      align: 'center',
      
      sortOrder: sortedInfo.columnKey === 'col_key5' ? sortedInfo.order : null,
    },
    {
      title: <div className="text-center">e</div>,
      dataIndex: 'col_key6',
      key: 'col_key6',
      align: 'center',
      sorter: (a, b) => a.col_key6.length - b.col_key6.length,
      sortOrder: sortedInfo.columnKey === 'col_key6' ? sortedInfo.order : null,
    },
  ];

  //---------------------------------------------------------- end data-table

  //main
  return (
    <>
      <Row justify={'space-between'} align={'middle'} className="mt-4">
        <Col xs={24} md={12} className="flex flex-wrap justify-end">
          <Space size={'middle'} className="flex flex-wrap">
            <Select
              value={orderBy}
              defaultValue={defaultOrderBy}
              size="middle"
              options={menuProps1}
              onChange={handleOrderByChange}
              className="w-[150px]"
            />
            <Select
              size="middle"
              value={pageSize}
              options={menuProps2}
              defaultValue={defaultPageSize}
              onChange={handlePageSizeChange}
              className="w-[150px]"
            />
          </Space>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Table columns={columns} dataSource={data} loading={loading} onChange={handleChange}
            pagination={{
              position: ["bottomCenter"], pageSize: pageSize, onShowSizeChange: handlePageSizeChange,
              showSizeChanger: false, // set to false to hide pageSizeOptions
            }} scroll={{ x: 'max-content' }}
          />
        </Col>
      </Row>

    </>
  );
};

（2）已编辑，以显示以下在线可复制代码_____________

https://codesandbox.io/p/sandbox/wonderful-wave-2e6bof?file=%2Fpages%2Foperate.tsx&selection=%5B%7B%22endColumn%22%3A17%2C%22endLineNumber%22%3A97%2C%22startColumn%22%3A17%2C%22startLineNumber%22%3A97%7D%5D

next.js

1条答案

按热度按时间
pxy2qtax

pxy2qtax1#

setPageSize将组件状态的更改入队。它告诉React这个组件及其子组件需要重新呈现新的状态。重新渲染将在稍后的时间开始，在执行handlePageSizeChange函数之后。问题是您正在阅读此行中pageSize状态的旧值console.log("page + new page: " + pageSize + " + " + newPageSize);。因为组件尚未使用更新后的值重新渲染。
我不确定这里的用例是什么，让你对pageSize和newPageSize都得到相同的结果，而你已经在newPageSize参数中更新了值。

赞(0）分享  回复(0）举报  2023-04-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com