前端 - react中一次点击事件触发useReducer的dispatch会添加两个重复的内容？

Question

react中一次点击事件触发useReducer的dispatch会添加两个重复的内容。

以下是回调函数：
const handleCheck = (e, path, ifPublic, tbIndex, chooseTable) => {

e.stopPropagation();// chooseTable为true时：点击会添加、不会取消// 1. 显示逻辑// 复制一份const newData = ifPublic == 1 ? [...publicList] : [...privateList];// 拿到复制体指针let currentLevel = newData;// 迭代找当前path下的最末级for (let i = 0; i < path.length; i++) {  if (i !== path.length - 1) {    currentLevel = currentLevel[path[i]].children;  } else {    currentLevel = currentLevel[path[i]];  }}const table = currentLevel.tableList?.at(tbIndex);table.checked = chooseTable ? true : !table.checked;if (ifPublic == 1) {  setPublicList(newData);} else if (ifPublic == 0) {  setPrivateList(newData);}// 2. 保存逻辑const newList = [...tableList];const index = newList.findIndex((item) => item.tableId == table.tableId);if (chooseTable) {  if (index < 0) {    newList.push(table);  }} else {  if (index > -1) {    newList.splice(index, 1);  } else {    newList.push(table);  }}dispatch({  type: 'permissionAssignment/updateState',  payload: {    tableList: newList,    selectedTable: chooseTable ? table : selectedTable,  },});console.log('dispatch结束');

};

以下是onclick事件：

      {item.tableList && expandedItems.includes(item.themeName) && (        <ul>          {item.tableList.map((d, tbIndex) => (            <div              key={d.tableId}              className={CS(                styles.dndnodeinput,                'flex items-center cursor-pointer   pl-12  text-left justify-between ',                {                  [styles.selected]: d.tableId === selectedTable?.tableId,                  // 'pr-2': theme == '未分类',                },              )}            >              <Checkbox                checked={d.checked}                onClick={(e) => {                  handleCheck(e, [...parent, index], ifPublic, tbIndex);                }}              />              <div                className={'mb-0 w-4/5'}                // ellipsis={{ rows: 1, tooltip: true }}                onClick={(e) => {                  handleCheck(                    e,                    [...parent, index],                    ifPublic,                    tbIndex,                    true,                  );                }}              >                {d.tableName}              </div>            </div>          ))}        </ul>      )}

Checkbox的功能正常，div会有问题

Answer 1

从你提供的代码中，我注意到在<div>标签的onClick事件中，你调用handleCheck函数并传递了相同的参数，这可能导致重复的dispatch调用。

为了解决这个问题，你可以尝试将dispatch的调用移到handleCheck函数的外部，并确保每次点击时只调用一次dispatch。

下面是一个修改后的示例代码：

{item.tableList && expandedItems.includes(item.themeName) && (  <ul>    {item.tableList.map((d, tbIndex) => (      <div        key={d.tableId}        className={CS(          styles.dndnodeinput,          'flex items-center cursor-pointer pl-12 text-left justify-between ',          {            [styles.selected]: d.tableId === selectedTable?.tableId,            // 'pr-2': theme == '未分类',          },        )}      >        <Checkbox          checked={d.checked}          onClick={(e) => {            handleCheck(e, [...parent, index], ifPublic, tbIndex, false);          }}        />        <div          className={'mb-0 w-4/5'}          // ellipsis={{ rows: 1, tooltip: true }}          onClick={(e) => {            handleCheck(e, [...parent, index], ifPublic, tbIndex, true);          }}        >          {d.tableName}        </div>      </div>    ))}  </ul>)}

在这个修改中，我改变了handleCheck函数的参数，以便区分是点击Checkbox还是div。在Checkbox的onClick事件中，我传递了false作为最后一个参数。而在div的onClick事件中，我传递了true作为最后一个参数。这样，每次点击时，只有对应的handleCheck函数会被调用，从而避免重复的dispatch调用。