ReactSetState陣列未更新

我的反應應用程式中有一個谷歌地圖，允許用戶注冊（通過輸入他們的名字）。然后它每 1 秒獲取一次他們的位置，并將其發送給當前使用該應用程式的所有其他用戶。

我正在嘗試使用 google-map-react 在地圖上繪制用戶。這應該在每次添加用戶時更新，或者他們的位置發生變化，并通過他們的標記在地圖上移動來反映這一點。

它是控制臺正確記錄 usersArray，但用戶沒有被更新，我做 setState 錯了嗎？

const Map = ({ location, zoomLevel }) => {
    const { name } = useParams();
    const [messages, setMessages] = useState([]);
    const ws = useRef();
    let [latitude, setLatitude] = useState('');
    let [longitude, setLongitude] = useState('');
    const [isConnectionOpen, setConnectionOpen] = useState(false);
    const [users, setUsers] = useState([]);

    useEffect(() => {
        ws.current = new WebSocket('ws://localhost:8081');
        //new user has connected
        ws.current.onopen = () => {
            setConnectionOpen(true);
        };
        //sending message to other users
        ws.current.onmessage = (ev) => {
            const message = JSON.parse(ev.data);
            //update users function
            handleAddNewUser(message);
            setMessages((_messages) => [..._messages, message]);
        };
        return () => {};
    }, []);

    //checks if a message has been received my a new user. If existing user - update location
    function handleAddNewUser(message) {
        let usersArray = [];
        let newUser = true;
        if (users.length == 0) {
            usersArray.push(message);
        } else {
            for (let user of users) {
                if (message.sender == user.sender) {
                    newUser = false;
                    user = message;
                }
            }
            if (newUser == true) {
                usersArray.push(message);
            }
        }
        console.log(usersArray);
        // update the state to the updatedUsers
        setUsers(usersArray);
        console.log(users);
    } 

    //triggers the send function every 1 second
    useEffect(() => {
        const interval = setInterval(() => {
            send();
        }, 1000);
        return () => clearInterval(interval);
    }, []);

    //sends the users location as a message to all the other users
    const send = () => {
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(function (position) {
                latitude = position.coords.latitude.toString();
                longitude = position.coords.longitude.toString();
                ws.current.send(JSON.stringify({ sender: name, latitude: latitude, longitude: longitude }));
                setLatitude('');
                setLongitude('');
            });
        }
    };

    return (
        <div className='map'>
            <div className='google-map'>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'keyID' }}
                    defaultCenter={location}
                    defaultZoom={zoomLevel}>
                     users.map(user => {
                    <MyGreatPlace lat={user.latitude} 
                    lng={user.longitude} text=  
                    {user.sender} />
                 })
                </GoogleMapReact>
            </div>
        </div>
    );
};
export default Map;

此外，在地圖上繪制用戶時，我收到此錯誤：意外令牌。您的意思是 {'>'} 還是 >？

uj5u.com熱心網友回復：

嘗試useEffect使用依賴陣列中的用戶登錄用戶。但是您的組件中有兩個useEffects。你應該只有一個！

//triggers the send function every 1 second
useEffect(() => {
    console.log(users)
    const interval = setInterval(() => {
        send();
    }, 1000);
    return () => clearInterval(interval);
}, [users]);

為了map渲染users你通常會這樣做（例如）：

<GoogleMapReact bootstrapURLKeys={{ key: 'keyID' }} defaultCenter={location} defaultZoom={zoomLevel}>
    {users?.map((user: any) => {
    return <MyGreatPlace lat={user.latitude} lng={user.longitude} text={user.sender} />
    })
    }
</GoogleMapReact>

uj5u.com熱心網友回復：

您應該首先檢查用戶是否存在。像這樣：

如果（用戶）{ setUsers（userArray）}

標籤：javascript 反应 谷歌地图

上一篇：使用Flask在后臺任務中發送批量電子郵件

下一篇：如何使用WinSpy 或Spy 等工具檢查旨在隱藏/關閉滑鼠移動的彈出視窗/工具提示/懸停效果？