我正在尝试构建一个聊天应用程序,并且具有选择要添加到聊天中的用户的功能。它在以下组件中(为了简化起见,我省略了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)
未将状态设置为新数组。谁能帮助我了解/解决此问题?
答案 0 :(得分:0)
由于setState是一个异步方法,因此当您立即调用它时,不一定总能获得期望值。您可以将回调方法传递给setState。如果将console.log语句移到该位置,应该会看到预期的结果。
这里有一些信息: https://dev.to/dance2die/accessing-react-state-right-after-setting-it-2kc8
答案 1 :(得分:0)
这里的主要问题是调用selected
之后setSelected()
的值将不会立即更新(请参见下面的线程链接)。
使用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>