反应点击处理程序无法正常工作

Question

there is a click handler , with 2 statements, and just one of them works, and when I comment out one of them , the other one works properly. the setShowDeleteConfirm is local state . and the setDeleteModal is context. why this happens?. tanx in advance.

<FaTrashAlt onClick={(e) => {
          setShowDeleteConfirm(!showDeleteConfirm);
          setDeleteModal(!deleteModal);
          e.stopPropagation();
          
          }}/> 

Answer 1

The reason for this is that setState() is asynchronous in Nature, we do not know when one will be executed. That's why this happens.

Suppose you have these two set Functions.

  setShowDeleteConfirm(!showDeleteConfirm);
  setDeleteModal(!deleteModal);

When the setShowDeleteConfirm(!showDeleteConfirm); starts to execute, we cannot predict when it would update the state, as this is asynchronous in nature, the same goes with other case. Cheers !!!

One quick solution I feel is to use callback within the Hook.

<FaTrashAlt onClick={(e) => {
          setShowDeleteConfirm( (prevState) =>{
               return {
                    showDeleteConfirm:!prevState
               }
           } );
          setDeleteModal( (prevState) => {
                return{
                deleteModal:!prevState
               });
           }
          e.stopPropagation(); // I feel this should not be used, it has no purpose here.
          
          }}/> 

Answer 2

When you are updating the state based on previous value it is always better to use the functional pattern. This helps us with a predictable value for the previous state.

 <FaTrashAlt onClick={(e) => {
          setShowDeleteConfirm( showDeleteConfirm => !showDeleteConfirm);
          setDeleteModal( deleteModal => !deleteModal);
          e.stopPropagation();
          
          }}/>