复选框 onchanged 未在反应中更新

Question

这是我第一次开发 React 应用程序。

我在react 中检索checkedMap useState 钩子时遇到问题，当复选框被选中然后未选中时，它不会更新其状态。状态似乎保存了检查的条目，无论下一个实例是否已经取消检查。

我访问的值是：Array.from(checkedMap.keys()));

场景 1 复选框 A - 勾选 复选框 B - 勾选

checkedMap= 复选框 A 和 B 的 id

场景 2 复选框 A - 勾选 复选框 B - 未勾选

checkedMap= 仍然是复选框 A 和 B 的 id //应该是复选框A的id

非常感谢您的帮助。

import React, { useState, useEffect, useRef } from "react";

// Simulate a server
const getServerData = async ({ filters, sortBy, pageSize, pageIndex }) => {
  await new Promise(resolve => setTimeout(resolve, 500));

  // Ideally, you would pass this info to the server, but we'll do it here for convenience
  const filtersArr = Object.entries(filters);

  // Get our base data
  const res = await axios.get(
    `url here`
  );
  let rows = res.data;

  // Apply Filters
  if (filtersArr.length) {
    rows = rows.filter(row =>
      filtersArr.every(([key, value]) => row[key].includes(value))
    );
  }

  // Apply Sorting
  if (sortBy.length) {
    const [{ id, desc }] = sortBy;
    rows = [...rows].sort(
      (a, b) => (a[id] > b[id] ? 1 : a[id] === b[id] ? 0 : -1) * (desc ? -1 : 1)
    );
  }

  // Get page counts
  const pageCount = Math.ceil(rows.length / pageSize);
  const rowStart = pageSize * pageIndex;
  const rowEnd = rowStart + pageSize;

  // Get the current page
  rows = rows.slice(rowStart, rowEnd);

  return {
    rows,
    pageCount
  };
};


export default function({ infinite }) {
  const [checkedMap, setCheckedMap] = useState(new Map());
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const currentRequestRef = useRef();

  let newMap = new Map();

  const fetchData = async () => {
    setLoading(true);

    // We can use a ref to disregard any outdated requests
    const id = Date.now();
    currentRequestRef.current = id;

    // Call our server for the data
    const { rows, pageCount } = await getServerData({
      filters,
      sortBy,
      pageSize,
      pageIndex
    });

    // If this is an outdated request, disregard the results
    if (currentRequestRef.current !== id) {
      return;
    }

    // Set the data and pageCount
    setData(rows);
    setState(old => ({
      ...old,
      pageCount
    }));

    rows.forEach(row => newMap.set(row, false));
    //setCheckedMap(newMap);

    setLoading(false);
  };

  const handleCheckedChange = transaction_seq => {
    let modifiedMap = checkedMap;
    modifiedMap.set(transaction_seq, !checkedMap.get(transaction_seq));
    setCheckedMap(modifiedMap);
  };

  const columns = [
    {
      Header: "Transaction(s)",
      className: "left",
      columns: [
        {
          id: "checkbox",
          accessor: "checkbox",
          Cell: ({ row }) => {
            return (
              <input
                type="checkbox"
                className="checkbox"
                checked={checkedMap.get(row.original.transaction_seq)}
                onChange={() =>
                  handleCheckedChange(row.original.transaction_seq)
                }
              />
            );
          },

const state = useTableState({ pageCount: 0 });

  const [{ sortBy, filters, pageIndex, pageSize }, setState] = state;

  const paginationButtons = (
    <React.Fragment>
      <Button onClick={() => reprocessConfirmation()}>Reprocess</Button>
      <Button onClick={() => reprocessConfirmation()}>View Details</Button>
    </React.Fragment>
  );

  function reprocessConfirmation() {
    let confirmation = window.confirm(
      "Do you want to reprocess transaction sequence " +
        Array.from(checkedMap.keys())
    );

    if (confirmation === true) console.log(Array.from(checkedMap.keys()));
    else console.log("CANCEL");
  }

  function updateConfirmation() {
    let confirmation = window.confirm("Do you want to update transaction");
    if (confirmation === true) console.log("OK");
    else console.log("CANCEL");
  }

  // When sorting, filters, pageSize, or pageIndex change, fetch new data
  useEffect(() => {
    fetchData();
  }, [sortBy, filters, pageIndex, pageSize]);

  return (
    <React.Fragment>
      <MyTable
        {...{
          data,
          checkedMap,
          paginationButtons,
          columns,
          infinite,
          state, // Pass the state to the table
          loading,
          manualSorting: true, // Manual sorting
          manualFilters: true, // Manual filters
          manualPagination: true, // Manual pagination
          disableMultiSort: true, // Disable multi-sort
          disableGrouping: true, // Disable grouping
          debug: true
        }}
      />
    </React.Fragment>
  );
}

Answer 1

由于您只是在选中和取消选中时切换值，因此未选中复选框时键仍然存在，您必须删除键或在映射中查找真实值，而不是仅检查键是否为存在与否。

第二个解决方案的代码 sn-p

function reprocessConfirmation() {
    const keys = [];
    checkedMap.forEach((value, key) => {
        if(value) keys.push[key]
    })
    let confirmation = window.confirm(
      "Do you want to reprocess transaction sequence " +
        keys
    );

    if (confirmation === true) console.log(keys);
    else console.log("CANCEL");
  }