与使用formik和MuiTable

Question

我从后端收到JSON数据列表，其中日期存储为格式

'MM/DD/YYYY'

.

。

i最初将这些数据分配给formik的
1. initialValues.。

   然后渲染formik形式和表格。
   

   在表标头上单击数据对数据进行分类。
可编辑的字段允许修改数据。
2. 仅观看日期字段将转换回字符串格式

   'MM/DD/YYYY'

   （
displayValue
3. ）。
可编辑的日期字段是按（
4. cellValue
）发送的。
5. 输入时，Invoice_Notes字段会奇怪地更新（输入后，部分文本消失，并删除光标。重新输入文本后，调试延迟会导致先前的输入更改再次丢失。
6. 州管理

   const [order, setOrder] = useState("asc");
   const [orderBy, setOrderBy] = useState(headers[0]);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(20);

   i我从母体组件中接收到我的表组件。
日期解析函数
7. invoiceTableData在传递到formik
之前对数据进行分类

8. const parseDates = (data) => {
     return data.map((item) => {
       const parsedItem = { ...item };
       Object.keys(parsedItem).forEach((key) => {
         if (typeof parsedItem[key] === "string" && /\d{1,2}\/\d{1,2}\/\d{4}/.test(parsedItem[key])) {
           parsedItem[key] = new Date(parsedItem[key]);
         }
       });
       return parsedItem;
     });
   };

分类处理程序函数

const initialSortedData = useMemo(() => {
  const parsedData = parseDates(invoiceTableData);
  return [...parsedData].sort((a, b) => {
    const valueA = a[orderBy];
    const valueB = b[orderBy];
    if (valueA instanceof Date && valueB instanceof Date) {
      return order === "asc" ? valueA - valueB : valueB - valueA;
    }
    return valueA < valueB ? (order === "asc" ? -1 : 1) : valueA > valueB ? (order === "asc" ? 1 : -1) : 0;
  });
}, []);

Formik初始化和表渲染

const handleSort = (header, orderBy, setOrderBy, order, setOrder, values, setFieldValue) => {
  const isAsc = orderBy === header && order === "asc";
  const newOrder = isAsc ? "desc" : "asc";

  const sortedData = [...values.data]
    .map((item) => ({ ...item }))
    .sort((a, b) => {
      let valueA = a[header];
      let valueB = b[header];

      const isNullA = valueA === null || valueA === "Invalid date" || valueA === "0000-00-00";
      const isNullB = valueB === null || valueB === "Invalid date" || valueB === "0000-00-00";
      if (isNullA && isNullB) return 0;
      if (isNullA) return 1;
      if (isNullB) return -1;

      if (!(valueA instanceof Date) && typeof valueA === "string" && /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(valueA)) {
        valueA = convertToDate(valueA);
      }
      if (!(valueB instanceof Date) && typeof valueB === "string" && /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(valueB)) {
        valueB = convertToDate(valueB);
      }

      if (valueA instanceof Date && valueB instanceof Date) {
        return newOrder === "asc" ? valueA - valueB : valueB - valueA;
      }
      return valueA < valueB ? (newOrder === "asc" ? -1 : 1) : valueA > valueB ? (newOrder === "asc" ? 1 : -1) : 0;
    });

  setFieldValue("data", [...sortedData]);
  setOrderBy(header);
  setOrder(newOrder);
};

可填充的字段组件

<Formik initialValues={{ data: initialSortedData }} innerRef={formRef}>
  <Form>
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            {headers.map((header) => (
              <TableCell key={header}>
                <TableSortLabel
                  active={orderBy === header}
                  direction={orderBy === header ? order : "asc"}
                  onClick={() => handleSort(header, orderBy, setOrderBy, order, setOrder, values, setFieldValue)}
                >
                  {getHeaderLabel(header)}
                </TableSortLabel>
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
<TableBody>
      {values.data
        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
        .map((row, index) => {
          const actualIndex = page * rowsPerPage + index; // Corrected index
          return (
            <TableRow
              className={globalClasses.TableRow}
              key={actualIndex}
              style={{
                fontSize: "1em",
                color: "#4e4e4e",
              }}
            >
              {headers.map((header) => {
                const cellValue = row[header];

                // Check if the value is a valid date and convert it to a Date object
                const isDate =
                  cellValue instanceof Date ||
                  (typeof cellValue === "string" &&
                    !isNaN(Date.parse(cellValue)) &&
                    cellValue.includes("-"));

                const parsedDate = isDate ? new Date(cellValue) : null;

                // Format date to MM/DD/YYYY if it's a valid date
                const displayValue = parsedDate
                  ? parsedDate.toLocaleDateString("en-US")
                  : cellValue;

                const fieldTypes = {
                  amount: "number",
                  invoice_notes: "text",
                  invoice_created_at: "date",
                  payment_date: "date",
                };

                return (
                  <TableCell
                    className={globalClasses.TableCellField}
                    key={header}
                    style={{ padding: 10, textAlign: "center" }}
                  >
                    {fieldTypes[header] ? (
                      <EditableTableFieldInvoice
                        type={fieldTypes[header]}
                        name={`data.${actualIndex}.${header}`}
                        setFieldValue={setFieldValue}
                        parentFormRef={formRef}
                        value={cellValue}
                      />
                    ) : (
                      <>
                        {displayValue}
                        {/* {isDate ? row[header].toLocaleDateString("en-US") : row[header]} */}
                      </>
                    )}
                  </TableCell>
                );
              })}
            </TableRow>
          );
        })}
    </TableBody>
      </Table>
    </TableContainer>
    <TablePagination rowsPerPageOptions={[10, 20, 30]} count={values.data.length} rowsPerPage={rowsPerPage} page={page} />
  </Form>
</Formik>

issue

初始排序（上升到下降）有效，但是分类为上升有时会失败。我怀疑一个国家管理问题，但我对

const EditableTableFieldInvoice = React.memo(({ name, type, value, setFieldValue, parentFormRef }) => {
  const [localValue, setLocalValue] = useState(value);

  const updateFormik = debounce((val) => {
    parentFormRef.current.setFieldValue(name, val);
  }, 500);

  const formatToYYYYMMDD = (date) => {
    if (!date) return "";
    if (!(date instanceof Date)) date = new Date(date);
    return isNaN(date.getTime()) ? "" : date.toISOString().split("T")[0];
  };

  return (
    <Field
      name={name}
      type={type}
      component={FMUInputField}
      value={type === "date" ? formatToYYYYMMDD(localValue) : localValue}
      onChange={(e) => {
                switch (type) {
                  case "date":
                    const inputValue = e.target.value;
                    const formattedDate = new Date(inputValue);
                    setLocalValue(formattedDate);
                    updateFormik(formattedDate);
                    break;

                  case "number":
                    const numberValue = Number(e.target.value);
                    setLocalValue(numberValue);
                    updateFormik(numberValue);
                    break;

                  default:
                    const updateValue = e.target.value;
                    setLocalValue(updateValue);
                    updateFormik(updateValue);
                    break;
                }
              }}
    />
  );
});

的解决方案尚未解决。

我如何解决此问题？

我认为问题是带有零值检查逻辑的问题。硬编码是，零值将始终以相同的方向进行排序，以防止对排序顺序的正确逆转。

您可以尝试以下逻辑吗？

if（isnulla && isnullb）返回0;

IF（ISNULLA）返回neworder ===“ ASC”？ 1：-1;

IF（ISNULLB）返回neworder ===“ ASC”？ -1：1;