Javascript React HOOK setState函数未设置状态

我正在尝试构建一个聊天应用程序，我有一个功能，可以选择要添加到聊天中的用户。在以下组件中，为了简洁起见，我省略了import语句和其中一个函数：

const AddUserBox = (props) => {

  // context:
  const { friends, getFriends, user, whoToMsg } = useContext(AppContext);

  // state:
  const [friendsDisplay, setFriendsDisplay] = useState();
  const [selected, setSelected] = useState();

  const getFriendsDisplay = async function() {
    if (!friends) await getFriends(user.username);

    if (friends) {
      let currentFriend;
      let result;
      let friendsInfo = [];

      friends.sort();

      for (let i = 0; i < friends.length; i++) {

        if (friends[i].user_1 === user.username) {
          currentFriend = friends[i].user_2;
        } else {
          currentFriend = friends[i].user_1;
        }

        if (currentFriend === whoToMsg) {
          return;
        } else if (typeof whoToMsg === Array) {
          if (whoToMsg.includes(currentFriend)) return;
        }

        await fetch('/proxy/get-user-update', {
          method: 'POST',
          headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type':'application/json'
          },
          body: JSON.stringify({username: currentFriend})
        })
        .then(results => results.json())
        .then(data => result = data)
        .catch(err => console.error(err));

        friendsInfo.push(result);
      }

      setFriendsDisplay(friends.map((friend, i) => {
        return <div 
          className="add-user-friends-button" 
          key={i}
          i={i}
          onClick={(e) => {selectUser(e, friend)}}
        >
          {friendsInfo[i].name}
        </div>
      }));
    }
  }

  const selectUser = function(e, friend) {
    let newArr = [];
    let currentFriend;

    if (friend.user_1 === user.username) {
      currentFriend = friend.user_2;
    } else {
      currentFriend = friend.user_1;
    }

    if (selected) {
      newArr = [...selected];
      if (selected.includes(currentFriend)) {
        e.target.style.backgroundColor = "";
        newArr.splice(newArr.indexOf(currentFriend), 1);
        setSelected(newArr);
        return;
      }
    }

    newArr.push(currentFriend);
    newArr.sort();

    e.target.style.backgroundColor = "#E6FCFF";
    setSelected(newArr);
    console.log(selected);
  }

  return ( 
    <div className="add-user">
      <span>Add users to chat:</span>
      <div className="add-user-friends">
        {friendsDisplay}
      </div>
      <button onClick={() => props.close()}>Close</button>
      <button onClick={() => addUsers()}>Add users</button>
    </div>
   );
} 

---

其思想是从列表中选择一个用户，并将其添加到所选用户的数组中，这样，当用户单击“添加用户”按钮时，用户将被添加到聊天室中。由于某些原因，setSelectednewArr不会将状态设置为新数组。有人能帮我理解/解决这个问题吗？

因为setState是一个异步方法，所以当您立即调用它时，并不总是能得到预期的值。您可以将回调方法传递给setState。如果将console.log语句移到其中，您应该会看到预期的结果

这里有一些信息：

---

这里的主要错误是，调用setSelected后，selected的值不会立即更新。请参阅下面的帖子链接到线程

使用useEffect，而不是尝试访问回调中的最新状态。使用setState返回的函数设置状态不会立即更新值。状态更新将在下一次渲染时进行批处理和更新

如果您将useffect看作是基于类的组件中setState的第二个参数，这可能会有所帮助

如果要使用最新状态执行操作，请使用状态更改时将命中的useEffect：

常数{ useState， 使用效果 }=反应； 功能应用程序{ const[count，setCount]=useState0； 常数减量==>SetCountCountCount-1； 常量增量==>SetCountCountCount+1； useEffect=>{ console.loguseffect，count； }，[计数]； console.logrender，count； 回来 {count}

- + ; } const rootElement=document.getElementByIdroot； ReactDOM.render，rootElement；

---

问题不仅仅是console.log语句没有显示更新的状态。看起来它实际上并没有更新状态，因为我也不能取消选择已选择的用户。如果选中，则始终返回false@Chris-Capua您是否尝试调试程序以调查问题？谢谢您深思熟虑的回答。我将很快重新阅读并检查您提供的链接。我已经用实际调用selectUser的函数更新了帖子。我调用了两次setSelected，因为一个在条件块中，另一个不在条件块中。我正在尝试删除取消选择的用户或适当地添加选择的用户。我的错误是，我忽略了返回，尽管下面的答案仍然适用于您的问题。还有什么不对劲吗？