React useState总是落后1步[重复]

Posted 2023-02-21

【中文标题】React useState总是落后1步[重复]

【英文标题】：React useState is always behind 1 step [duplicate]

【发布时间】：2021-05-26 17:44:00

【问题描述】：

我对 React 还是很陌生。我已经学习了几个月了。我目前正在使用 ant-design 创建标签并尝试在点击时删除它们。我有一个用户状态，根据他们是要删除还是创建标签，用户状态会更新。但是，当我删除标签时，users 状态不会立即更新，并且当我在 removeUser() 中的 console.log(users); 时返回空数组。我看过与此类似的先前问题，但是他们使用useEffect()，但这不适合我的用例。我还尝试将这个<Tag> 放在代码的返回部分中，这可以解决问题，但是每次我从用户表中选中一个复选框时，标签的颜色都会重新渲染。当标签被移除时，removeUser() 函数被调用，解析 userId 以便我可以从状态中移除用户。但是，由于状态未更新，因此不会将其删除，因为它是空的，因此 [...users].map() 不会映射任何内容。我该如何解决这个问题？

const [users, setUsers] = useState([]);

const createUserTags = () => 
  const oldUsers = [...users];
  let updatedUsers = selectedRowKeys.map(userId => ( 
  <Tag onClose = () => removeUser(userId)
    closable key = userId> 
    [...dataSource].map(user => 
    return user.Id === userId && "user.firstName" + " "+"user.surname";
      )
     
  </Tag>
  ));
  updatedUsers.unshift(oldUsers);
  setUsers([...updatedUsers]);
;

  const removeUser = userId => 
   
        // remove user from array list
       
   ;


return (
  <>
    <Button 
      shape = "round"
      onClick = () => createUserTagsHandler()
      type = "primary"> Create Tag 
    </Button> 
</>
  </>
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【参考方案1】：

setState 操作是异步的，为了提高性能而进行批处理。这在setState的文档中有说明

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。无法保证 setState 调用的同步操作，并且调用可能会被批处理以提高性能。

如果您需要在 setState 调用后确保事件的顺序，您可以传递一个回调函数。 this.setState( something: true , () => console.log(this.state))

【参考方案2】：

这是因为设置状态是一个异步函数，当你调用 console.log 时设置状态函数没有完成，因此给出了先前的状态值。详细了解请refer。

【讨论】：

引用链接不会带我去任何地方

@Daniel medium.com/@leonardobrunolima/…

【参考方案3】：

当您 console.log 时，状态似乎落后了一步，因为 setState() 是异步的，但是，与前一种情况一样，它仍然可以正确更新。如果这提交到您会看到的表单，它会发送正确的更新状态

【讨论】：

我尝试使用该表单，但它会导致页面重新加载，并且由于我的路由，它会将其带到主页。为了防止这种情况，我使用了event.preventDefault()，但这让我回到了原来的问题。