当我通过useState在React中打开页面时，如何选择所有按钮和活动按钮？

Question

我有一个 React 应用程序。我在 ItemList 页面上列出了一些项目。我真正想做的是选择全部并激活按钮。然而我却做不到。

当我第一次打开页面并选择全部时，删除按钮未激活，但所有项目都被选中。

当我导航到另一个页面并返回上一页，然后选择全部时，删除按钮处于活动状态。

问题出在哪里？我该如何解决它？

下面是代码：

export default function ItemList() {
  const [selectAllCheckbox, setSelectAllCheckbox] = useState(false);
  const [selectedCheckbox, setSelectedCheckbox] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]);
  const [items, setItems] = useState([]);


useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setItems(result.items);

        setSelectAllCheckbox((prevState) => prevState || false);
      } catch (error) {
        throw(error.message);
      }
    };

   fetchData();

    return () => {
      setSelectedRows([]);
      setSelectedCheckbox(false);
    };
  }, [url]);



  useEffect(() => {
    if (checkAllRef.current) {
      checkAllRef.current.checked = selectAllCheckbox;
    }
  }, [selectAllCheckbox]);

  const handleCheckAll = () => {
    const updatedItems = items.map((item) => ({
      ...item,
      selected: !selectAllCheckbox,
    }));
    setItems(updatedItems);

    const updatedRows = !selectAllCheckbox
      ? items.map((item) => item.metadata.name)
      : [];

    setSelectedRows(updatedRows);
    setSelectAllCheckbox(!selectAllCheckbox);
  };


    const handleRowSelection = (name) => {
    const updatedItems= items.map((item) => {
      if (item.metadata.name === name) {
        return { ...item, selected: !item.selected };
      }
      return item;
    });
    setItems(updatedItems);
    setSelectedRows(
      updatedItems
        .filter((item) => item.selected)
        .map((item) => item.metadata.name)
    );
    setSelectAllCheckbox(updatedItems.every((item) => item.selected));
  };

{rest part of the code}

return (
    <>
 {rest part of the code}
 <button
        className="btn btn-danger"
        disabled={!(selectAllCheckbox || selectedRows.length > 0)}
        onClick={handleDeleteRows}
 >
    Delete
 </button>

 <input
     type="checkbox"
     className="js-check-all align-middle"
     ref={checkAllRef}
     checked={selectAllCheckbox}
     onChange={handleCheckAll}
  />
  {rest part of the code}
<>
)

我该如何修复它？

Answer 1

请显示您的所有代码。太难理解了。 那么您的意思是，如果您单击“全选”，则会选中此按钮并同时禁用删除按钮？ 如果是正确的话，在我看来，这个问题是由于

setSelectAllCheckbox

功能的延迟而发生的。 在您的代码中，

select all

按钮和

delete

按钮通过“selectAllCheckbox”的相同状态来选中或禁用