为异步重用本机传递属性

时间:2018-03-22 17:37:49

标签: react-native

所以我得到了一个包含大量<Text>

的字段的数组

现在我在这里也有一个按钮。我想要做的就是onclick我想去一个函数onSubmit,它也取值session.gameId并将它放在asyncstorage中。

  {this.state.sessions.map((session, index) => {

                return (
                    <View style={styles.cardContainer}>


                <Text style={styles.title} >{session.title}</Text>
                        <Text style={styles.text}>Organisator: {session.organizer}</Text>
                        <Text style={styles.text}>Hoofd Thema: {session.mainTheme}</Text>
                        <Text style={styles.text}>Aantal Deelnemers: {session.numberParticipants}</Text>
                        <Text style={styles.text}>Game Id: {session.gameId}</Text>
                        <TouchableOpacity style={styles.buttonContainer} >

                            <Text style={styles.buttonText} onPress={this.onSubmit} value={session.gameId} >
                               Selecteer
                            </Text>
                        </TouchableOpacity>

但是我不知道我的onsubmit如何在将值存储到asyncstorage之后处理更改页面的事件

请帮忙

2 个答案:

答案 0 :(得分:0)

不确定我是否正确理解了您的问题,但是如果您尝试将session.gameId的值存储到AsyncStorage然后更改页面,则您的函数可能如下所示:

changePage() {// functionality to navigate to another page}

/* 
 * have onSubmit be an async function so you use the 'await' keyword
 * await forces an asynchronous line of code to wait until the operations is done before moving forward 
*/
async onSubmit(gameId) {
  try { 
    await AsyncStorage.setItem('@store:key', gameId) 
  } catch(error) {
    // handle error
  }

  // however you are changing page, handle it here
  // this code wont run until gameId has been stored in async storage
  this.changePage()

  }

您还需要将gameId传递给函数才能实际调用它:

onPress={() => this.onSubmit(session.gameId)}

了解async函数如何让您的生活更轻松:)

答案 1 :(得分:0)

我回答这个问题,假设当你说onSubmit触发&#34;要更改页面的事件&#34;时,你的意思是它会导航到另一个屏幕。

如果是这样,你似乎要求这样的事情:

onSubmit = async gameId => {
  try {
    await AsyncStorage.setItem('gameId', gameId)

    // Success: navigate away here
    this.props.goToMyOtherScreen()
  } catch {
    // Handle error
  }
}

要将gameId放入提交处理程序,可以使用内联匿名函数:

<Text
  style={styles.buttonText}
  onPress={() => this.onSubmit(session.gameId)}>