typescript - React Native-navigation (4.x) props blir null mellan skärmar


Jag har en stapel av skärmar som används för att skapa objekt som kommer att visas i slutet.

När man skickar parametrar genom skärmar finns det inget problem förrän den sista.

När du bekräftar på den sista skärmen triggas funktionen som navigerar till instrumentpanelen (där alla objekt listas), den går dit den ska, men vid ögonblicket av att hämta parametrarna i konstruktorn returneras de som null, även om jag tydligt kan se med debuggern att egenskapen framgångsrikt skickas till navigeringsfunktionen.

Koden nedan anropar ett api från backend för att hämta den aktuella user, om det lyckas triggas funktionen openDashboardHouses:

new UsersApi(context).apiUsersCurrentMeGet().then(resp => {
            console.log(resp);
                     // passing context - user - house object 
            openDashboardHouses(context, resp, context.state.house);
        }).catch(error => {
            console.log(JSON.stringify(error))
            AlertHelper.showSimpleErrorAlert();
        });

Funktionen openDashboardHouses är bara den enda kodraden för att navigera:

export function openDashboardHouses(context: Component<NavigationProps, any>, user: User, house: House = null) {
    context.props.navigation.navigate(dashboardHousesRoute, {user: user, house: house}); // During debugging the values on this line are correctly filled
}

Sedan på nästa skärm bör det hämta props i konstruktören och spara dem i tillståndet:

constructor(props) {
        super(props);
        setHeaderTitleLocalized(props, 'screens.dashboard.title');

        this.state = {
            loading: false,
            user: getUserFromNavigationProps(this), 
            houses: [],
            resources: [],
            created_house: getHouseFromNavigationProps(this), 
        };
    }

Som du kan se har jag två hjälpfunktioner, ingen av dem returnerar något

export function getUserFromNavigationProps(context: Component<NavigationProps, any>) {
    return context.props.navigation.getParam(USER_KEY); // USER_KEY = 'user'
}

export function getHouseFromNavigationProps(context: Component<NavigationProps, any>): House {
    return context.props.navigation.getParam(HOUSE_KEY); // HOUSE_KEY = 'house'
}

Någon aning om vad som pågår?

Ytterligare information: det där husobjektet skapas på den första skärmen och det förs vidare på samma sätt i alla skärmar. Det är bara den sista som inte vill samarbeta

Beroenden :

React Native:

├─ [email 
│  ├─ @sentry/react-native@^1.0.0

React-navigation:

├─ @react-navigation/[email 
├─ @react-navigation/[email 
├─ @react-navigation/[email 
├─ [email 
├─ [email 
├─ [email 
├─ [email 
│  ├─ @react-navigation/core@~3.5.0
│  ├─ @react-navigation/native@~3.6.1
│  ├─ react-navigation-drawer@~1.4.0
│  ├─ react-navigation-stack@~1.5.0
│  └─ react-navigation-tabs@~1.2.0

Svar #1

Jag hittade en "lösning", uppenbarligen är konstruktören (bara denna av någon anledning) trasig eller något och kan inte tilldela värden.

Enligt 4.x-dokumentationen kan du få alla navigeringsprop på

this.props.navigation.state.params

Så istället för att försöka sätta det som ett tillstånd använder jag bara detta som ett objekt där jag behöver det.

Till exempel

console.log(this.props.navigation.state.params.house);

skriver ut rätt sak.

OBS. Jag kunde inte eftersom mitt projekt redan är för stort, men när du har möjlighet, uppdatera alltid dina beroenden till den senaste versionen för att undvika den här typen av buggar