javascript - 当一个 prop 发生变化时， const 将返回其初始值

Question

我有这个组件，它是表格的过滤器..

handleSearch 函数负责更新 const 过滤器......当 dataIndex 道具相同时，它的工作完美，但是当它发生变化时，过滤器值返回到它的初始值，一个空数组。

我无法解决它，我已经控制台记录了所有内容。

import React, { useState, } from "react";
import { SearchOutlined } from "@ant-design/icons";
import { Select,  Button, Space } from "antd";

const TableFilter = (props) => {
  const {
    filterType,
    filterMode,
    filterOptions,
    FilterSelectOnFocus,
    dataIndex,
    setSelectedKeys,
    selectedKeys,
    confirm,
    clearFilters,
  } = props;

  const [filters, setFilters] = useState([]);
 

  const SelectFilter = (
    <Select
      style={{ width: 188, marginBottom: 8, display: "block" }}
      type={filterType}
      mode={filterMode}
      name={dataIndex}
      value={selectedKeys}
      optionFilterProp="children"
      placeholder={`Search ${dataIndex}`}
      onFocus={FilterSelectOnFocus}
      showSearch
      onChange={(value) => setSelectedKeys(value ? value : [])}
      getPopupContainer={(trigger) => trigger}
      notFoundContent
    >
      {filterOptions?.map((type, key) => (
        <Select.Option value={type.value} key={key}>
          {type.label}
        </Select.Option>
      ))}
    </Select>
  );

  const defaultFilterTypes = [
    {
      type: "select",
      element: SelectFilter,
    },
  ];

  const handleFilterType = () => {
    const type = defaultFilterTypes.find((types) => types.type === filterType);
    return type.element;
  };

  const handleSearch = () => {    
    
  
    console.log(filters) //is empty when dataIndex value change, when it's is the same it get the update value of the 75 line
    confirm();

    const newFilterValues = [...filters]
    
   
    const index = newFilterValues.findIndex(newValue => newValue.searchedColumn === dataIndex)
    

    if(index === -1){
      newFilterValues.push({ searchText: selectedKeys, searchedColumn: dataIndex})
    }
    else{
      newFilterValues[index] = {searchText: selectedKeys, searchedColumn: dataIndex}
    }

    setFilters(newFilterValues)
    
   
     
  }

  const handleReset = () => {
   
   console.log('reset');
    clearFilters();
    setFilters({ searchText: "" });
    setSelectedKeys([]);
  };

  return (
    <div style={{ padding: 8 }}>
      {handleFilterType()}
      <Space>
        <Button
          type="primary"
          onClick={() => handleSearch()}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90 }}
        >
          Search
        </Button>
        <Button
          onClick={() => handleReset()}
          size="small"
          style={{ width: 90 }}
        >
          Reset
        </Button>
      </Space>
    </div>
  );
};
export default TableFilter;

表组件

import React, { useEffect, useState } from "react";
import { Table } from "antd";
import { getTransactions } from "../../../../api/Transactions";
import { formatCnpjCpf, formatCurrency } from "../../../../utils/masks";
import TableFilter from "../../../../shared-components/ant-design/containers/TableFilters";
import { getPartnersAsOptions } from "../../../../api/Partners";

const Insider = (props) => {
  const [data, setData] = useState([]);
  const [paginationValues, setPaginationValues] = useState({
    current: 1,
    pageSize: 50,
    total: 0,
    position: ["topRight"],
  });

  const [partners, setPartners] = useState([{value: null, label: 'carregando...'}])

  const context = "insider";

  function getColumnSearchProps(
    dataIndex,
    filterType,
    filterMode,
    filterOptions,
    FilterSelectOnFocus
  ) {
    return {
      filterDropdown: ({
        setSelectedKeys,
        selectedKeys,
        confirm,
        clearFilters,
      }) => {
        return (
          <TableFilter
            dataIndex={dataIndex}
            filterType={filterType}
            filterMode={filterMode}
            filterOptions={filterOptions}
            FilterSelectOnFocus={FilterSelectOnFocus}
            setSelectedKeys={setSelectedKeys}
            selectedKeys={selectedKeys}
            confirm={confirm}
            clearFilters={clearFilters}
          />
        );
      },
    };
  }

  async function getPartners(){
      
     if(partners.length > 2){
       return
     }

     const response = await getPartnersAsOptions(paginationValues)
     setPartners(response.data)
     

  }

  const columns = [
    {
      dataIndex: ["transactionType", "desc"],
      title: "Tipo de Transação",
      sorter: true,
      key: "orderTransactionType",
      ...getColumnSearchProps("orderTransactionType"),
    },
    {
      dataIndex: "transactionDate",
      title: "Data Transação",
      key: "orderTransactionDate",
      sorter: true,
      ...getColumnSearchProps("orderTransactionDate"),
    },
    {
      title: "Nome origem",
      dataIndex: ["source", "name"],
      sorter: true,
      key: "orderSourceCustomerName",
    },
    {
      render: (render) => formatCnpjCpf(render.source.document.value),
      title: "Documento origem",
      key: "sourceCustomer",
      ...getColumnSearchProps("sourceCustomer", "select", "tags")
    },
    {
      title: "Nome destino",
      dataIndex: ["target", "name"],
      sorter: true,
      key: "orderTargetCustomerName",
    },
    {
      render: (render) => formatCnpjCpf(render.target.document.value),
      title: "Documento destino",
    },
    {
      render: (render) => formatCurrency(render.value),
      title: "Valor da transação",
      key: "orderValue",
      sorter: true,
      align: "right",
    },
    {
      render: (render) => formatCurrency(render.chargedTariff),
      title: "Tarifa",
      key: "orderChargedTariff",
      sorter: true,
      align: "right",
    },
    {
      render: (render) => formatCurrency(render.cost),
      title: "Custo",
      key: "orderCost",
      sorter: true,
      align: "right",
    },
    {
      render: (render) => formatCurrency(render.revenue),
      title: "Receita",
      key: "orderRevenue",
      sorter: true,
      align: "right",
    },
    {
      title: "Parceiro",
      name: "Parceiro",
      dataIndex: ["partner", "name"],
      key: "orderPartnerName",
      sorter: true,
      align: "center",
      ...getColumnSearchProps(
        "orderPartnerName",
        "select",
        "multiple",
        partners,
        getPartners)
    },
    {
      title: "id da transação",
      name: "id da transação",
      dataIndex: "id",
    },
  ];

  useEffect(function transactions() {
    async function fetchTransactions() {
      const response = await getTransactions(context, paginationValues);

      if (response) {
        const { data, pagination } = response;

        setData(data);
        setPaginationValues(pagination);
      }
    }
    fetchTransactions();
    // eslint-disable-next-line
  }, []);

  return <Table dataSource={data} columns={columns} />;
};

export default Insider;

标签： javascriptreactjsreact-hooks

Answer 1

你可以移动这段代码

const [filters, setFilters] = useState([]);

在更高的层次