React Hooks setState函數未設置狀態

Question

我正在嘗試構建一個聊天應用程序，並且具有選擇要添加到聊天中的用戶的功能。 它在以下組件中（為了簡化起見，我省略了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>
   );
} 

這個想法是從列表中選擇一個用戶，然后將其添加到選定用戶的數組中，這樣當他們單擊“添加用戶”按鈕時，會將用戶添加到聊天中。出於某種原因， setSelected(newArr)不會設置狀態到新數組。 誰能幫助我了解/解決此問題？

Answer 1

由於setState是一個異步方法，因此當您立即調用它時，不一定總能獲得期望值。 您可以將回調方法傳遞給setState。 如果將console.log語句移到該位置，則應該看到預期的結果。

這里有一些信息： https : //dev.to/dance2die/accessing-react-state-right-after-setting-it-2kc8

Answer 2

這里的主要問題是，調用setSelected()之后， selected的值將不會立即更新（請參見下面的線程鏈接）。

而不是嘗試訪問回調中的最新狀態，請使用useEffect 。 使用從setState返回的函數設置狀態不會立即更新您的值。 狀態更新將在下一個渲染器中進行批處理和更新。

如果將useEffect() setState的第二個參數（來自基於類的組件），則可能會有所幫助。

如果要對最新狀態進行操作，請使用useEffect() ，當狀態更改時，它將被點擊：

 const { useState, useEffect } = React; function App() { const [count, setCount] = useState(0); const decrement = () => setCount(count-1); const increment = () => setCount(count+1); useEffect(() => { console.log("useEffect", count); }, [count]); console.log("render", count); return ( <div className="App"> <p>{count}</p> <button onClick={decrement}>-</button> <button onClick={increment}>+</button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( < App / > , rootElement); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="root"></div> 

有關useEffect()更多信息