Question

我正在构建一个本机应用程序，用户可以在其中创建事件并邀请人们。

但是我在从路由组件修改组件状态时遇到一些问题。

有一个createEvent屏幕，用户尝试在其中创建事件...单击“邀请人员”按钮，将呈现一个新屏幕，让我们将其命名为InvitationPeopleScreen。

如果我没看错...我想我需要使用redux。

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

类似的东西：

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

假设您将list道具添加到状态

Answer 2

您可以通过以下三种方法实现此目的，方法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>

在您的InviteUsers屏幕中，获取函数并传递用户名。

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

Demo

如何修改已路由组件的组件状态？

2 个答案: