使用react-native-maps在地圖上繪制標記

Question

簡而言之，我正在嘗試使用react-native-maps在地圖上繪制標記。

我所做的只是創建一個從服務器獲取坐標和相應ID的操作（請參見下面的代碼）。

export const getPlacesOnMap = () => {
return dispatch => {
    dispatch(authGetToken())
        .then(token => {
            return fetch("myApp?auth=" + token);
        })
        .catch(() => {
            alert("No valid token found!");
        })
        .then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw(new Error());
            }
        })
        .then(parsedRes => {
            const places = [];
            for (let key in parsedRes) {
                places.push({
                    // ...parsedRes[key], // this fetches all the data
                    latitude: parsedRes[key].location.latitude,
                    longitude: parsedRes[key].location.longitude,
                    id: key
                  });
                } console.log(places)
                dispatch(mapPlaces(places));
              })
        .catch(err => {
            alert("Oops! Something went wrong, sorry! :/");
            console.log(err);
        });
    };
};


export const mapPlaces = places => {
return {
    type: MAP_PLACES,
    places: places
 };
};

我不知道我是否使用了正確的單詞，但實際上我已經使用componentWillMount（）測試了代碼（上面），並且它成功地將多個坐標作為對象數組返回。

現在，問題是我不知道下一步該怎么做。 據我了解，我知道最終目標是創建一個setState（）。 但是我不知道如何到達那里。

如果有人可以指出我正確的方向，那將是很大的幫助。

Answer 1

您需要創建一個異步操作。 您可以根據解析或拒絕異步函數內部的異步功能，在異步動作內部調度不同的動作。

export function getPlacesOnMap(token) {
    return async function(dispatch) {
        dispatch({
            type: "FETCHING_PLACES_PENDING"
        });
        fetch("myApp?auth=" + token)
        .then(res => {
            dispatch({
                type: "FETCHING_PLACES_FULFILLED",
                payload: res.json()
            });
        })
        .catch(error => {
            dispatch({
                type: "FETCHING_PLACES_REJECTED",
                payload: error
            });
        });
    };
}

如果您的authGetToken（）函數也是一個承諾，則需要在authGetToken（）解決之后分派此操作。 您可以在減速器的“ FETCHING_PLACES_FULFILLED”情況下使用action.payload以便能夠使用檢索到的數據。

UPDATE

您的減速器應如下所示：

export default function reducer(
    state = {
        loadingMarkers : false,
        markers : [],
        error : null,
    },
    action
) {
    switch (action.type) {
        case "FETCHING_PLACES_PENDING":
            return { ...state, loadingMarkers: true };
        case "FETCHING_PLACES_FULFILLED":
            return { ...state, loadingMarkers: false, markers: action.payload};
        case "FETCHING_PLACES_REJECTED":
            return { ...state, loadingMarkers: false, error: action.payload };
        default:
            return state;
    }
}

現在，您可以將組件連接到redux並在獲取標記時使用它們。

看一下這個例子並連接文檔