React 使用钩子替换状态数组答案

【问题标题】：React replace state array using hooksReact 使用钩子替换状态数组
【发布时间】：2022-01-22 02:12:57
【问题描述】：

我正在尝试使用单独给定的数组替换状态数组。我无法让我的状态更新以保存单独数组的值。我已经尝试了几件事

   const [userFriendsList, setUserFriendsList] = useState([]);

    window.chatAPI.recvFriendsList(message => {
        if (message.length > userFriendsList.length)
        {
            console.log(message)
            setUserFriendsList(message);
            console.log(userFriendsList)
        }
    });

    const [userFriendsList, setUserFriendsList] = useState({friendsList: []});

    window.chatAPI.recvFriendsList(message => {
        if (message.length > userFriendsList['friendsList'].length)
        {
            console.log(message)
            setUserFriendsList({friendsList : message});
            console.log(userFriendsList)
        }
    });

const [userFriendsList, setUserFriendsList] = useState([]);

    window.chatAPI.recvFriendsList(message => {
        if (message.length > userFriendsList.length)
        {
            console.log(message)
            setUserFriendsList([ ... userFriendsList, message]);
            console.log(userFriendsList)
        }
    });

这些都没有更新状态。

编辑：组件 -

const FriendsList = () =>
{
    const [checkFriendsList, setCheckFriendsList] = useState(true)
    const [userFriendsList, setUserFriendsList] = useState([]);

    window.chatAPI.recvFriendsList(message => {
        console.log(message)
        setUserFriendsList(oldFriendList => [ ...oldFriendList, ...message]);
        console.log(userFriendsList)
    });

    useEffect ( () => {
        if (checkFriendsList)
        {
            setCheckFriendsList(false);
            window.chatAPI.getFriendsList();
        }
    }, [checkFriendsList])

    return (
        <div className="friends-list-container">
            <List className="friends-list">
                <ListItem className="friends-list-title"> Friends List </ListItem>
            </List>
        </div>
    );
}

输出：

【问题讨论】：

标签： reactjs state

【解决方案1】：

尝试禁用 if 语句。

// if( your condition)
{
   setUserFriendsList([ ... userFriendsList, ...message]);
}

【讨论】：

这不起作用，我更新了我的帖子以显示完整的组件和输出。
您的第二个 console.log 在调用 setUserFriendList 后立即被调用——但 userFriendList 的值在下一次渲染之前不会更新，所以记录的实际上不是新的值userFriendList 但旧的。如果您将该 console.log 移到 main 函数中，您可能会看到您正在寻找的值。

【解决方案2】：

问题在于if (message.length > userFriendsList.length).
如果message 是一个非空字符串，它总是比你的空userFriendsList 状态更长，删除条件并更新数组：

const [userFriendsList, setUserFriendsList] = useState([]);

window.chatAPI.recvFriendsList(message => {
    setUserFriendsList(oldFriendList => [ ...oldFriendList, message]);
});

如果 message 是一个数组，那么就这样做：

const [userFriendsList, setUserFriendsList] = useState([]);

window.chatAPI.recvFriendsList(message => {
    setUserFriendsList(oldFriendList => [ ...oldFriendList, ...message]);
});

【讨论】：

我尝试了您的建议，但仍然无法正常工作：/ 我将使用整个组件和控制台的输出更新我的帖子。