react click handler不能正常工作

Question

有一个点击处理程序，有2个语句，其中只有一个工作，当我注释掉其中一个时，另一个工作正常。setshowdeletecconfirm是本地状态。setdeletemmodal是context。为什么会这样?

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

Answer 1

这样做的原因是setState()在本质上是异步的，我们不知道何时执行一个。这就是为什么会发生这种情况。

假设你有这两个集合函数。

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

当setShowDeleteConfirm(!showDeleteConfirm);开始执行时，我们无法预测它何时会更新状态，因为这本质上是异步的，其他情况也是如此。干杯! !

我觉得一个快速的解决方案是在Hook中使用callback。

<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

当您基于先前的值更新状态时，最好使用函数模式。这可以帮助我们为之前的状态提供一个可预测的值。

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