React useState 总是落后 1 步

Question

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


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>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>

Answer 1

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

Answer 2

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

Answer 3

setState 操作是异步的，并且为了提高性能而进行批处理。 setState

的文档对此进行了解释

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

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

React useState 总是落后 1 步

React useState is always behind 1 step

reactjs

antd

use-state