Как изменить состояние компонента из маршрутизируемого компонента?

Question

Я создаю собственное приложение, где пользователи могут создавать события и приглашать людей.

Но у меня возникают некоторые проблемы при изменении состояния компонента из перенаправленного компонента.

Существует экран createEvent, на котором пользователь пытается создать событие ... при нажатии на кнопку приглашения людей отображается новый экран, назовем его invitPeopleScreen.

Если я не ошибаюсь ... Я думаю, что мне нужно использовать излишек.

Экран createEvent:

import React from 'react';
import {Button, Container, Form, Input, Item, Text, Textarea} from "native-base";

export default class createEventScreen extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            description: '',
            createdBy: '',
            invites: []
        };
    }

    createEvent () {}

    render() {
        return (
            <Container>
                <Text>Create An Event </Text>
                <Form>
                    <Item rounded>
                        <Input keyboardType="default"
                               placeholder="Enter the event title"
                               onChangeText={ title => this.setState({ title: title }) } />
                    </Item>

                    <Item rounded>
                        <Textarea keyboardType="default"
                               placeholder="Enter the event description"
                               onChangeText={ description => this.setState({ description: description }) } />
                    </Item>
                </Form>
                <Button rounded onPress={ () => { this.props.navigation.navigate('invitePeople') }}>
                    <Text>Invite People</Text>
                </Button>
                <Button rounded onPress={this.createEvent}>
                    <Text>Create Event</Text>
                </Button>
            </Container>
        )
    }
}

Вот экран приглашения:

import React from 'react';
import { Container } from "native-base";

export default class inviteUsersScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
         }
    }

    addInvite = (username) => {
       // push the username into the invites array of createEventScreen
}
    render() {
        return (

            <Container>
                <Text>Invite People </Text>
                <Form>
                    <Item rounded>
                        <Input keyboardType="default"
                               placeholder="Enter the username"
                               onChangeText={ (username) => {this.setState({ username: username)})} />
                    </Item>
                </Form>

                <Button rounded onPress={ () => { this.addInvite(this.state.username) }}>
                    <Text>Submit</Text>
                </Button>
        );
    }
}

Я точно не уверен, какой код войдет в функцию addInvite.

Answer 1

Для этого есть три варианта, вариант 1: передать функцию в качестве реквизита на следующий экран, вариант 2: использовать асинхронное хранилище, вариант 3: Redux.

Опция: 1.

в вашем CreateEventScreen передайте функцию на второй экран в виде проп.

addInvite = username => {
  this.setState({
    invites: [...this.state.invites, username],
  });
};

<Button
  rounded
  onPress={() => {
    this.props.navigation.navigate('InvitePeople', {
      addInvite: this.addInvite,
    });
  }}>
    <Text>Invite People</Text>
</Button>

В вашем InviteUsersScreen получите функцию и передайте имя пользователя.

addInvite = username => {
  // push the username into the invites array of createEventScreen
  const addInvite = this.props.navigation.getParam('addInvite', () => {
    alert('No function was passed');
  });

  addInvite(username);
};

Вариант 2: AsyncStorage

import {AsyncStorage} from 'react-native';

// create function for saving items to storage
export const SaveItem = async (key, value) => {
  try {
      await AsyncStorage.setItem(key, value);
      console.log('saved')
  } catch(e) {
      console.log(e)
  }
};

// create function for saving items to storage
export const ReadItem = async key => {
  try {
    var result = await AsyncStorage.getItem(key);
    return result;
  } catch (e) {
    return e;
  }
};

Затем вы можете добавить элементы в хранилище на вашем InviteUsersScreen.

addInviteWithStorge = username => {
  const usernames = [...this.state.storageUsernames, username];

  this.setState({
    storageUsernames: usernames,
    username: '',
  });

  const invites = JSON.stringify(usernames);

  SaveItem('invites', invites)
    .then(res => {
      console.log('saved', res);
    })
    .catch(e => console.warn(e));
};

Получить элементы в вашем CreateEventScreen.

 ReadItem('invites')
  .then(res => {
    if (res) {
      const invites = JSON.parse(res);
      this.setState({
        invites: invites,
      });
    }
  })
  .catch(e => console.warn(e));

Демо

Answer 2

Возможно, что-то подобное:

addInvite = (e, username) => {
  e.preventDefault();
  this.setState({
  list: [...this.state.list, username]
})
}

Если вы добавите в свой штат list проп