React 使用钩子替换状态数组

Question

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

   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)
        }
    });

None 个正在更新状态。

编辑：组件 -

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>
    );
}

输出：

Answer 1

尝试禁用 if 语句。

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

Answer 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]);
});

React 使用钩子替换状态数组

React replace state array using hooks

state

reactjs