this.setState React Native

时间:2016-12-08 14:40:21

标签: javascript reactjs native

我4天前开始学习React native。 我正在尝试将属性this传递给其他Scene,但是,我保持遇到此错误 _this.setState is not a function。 我相信这不是重复,因为我已经阅读了这两个Stack答案,他们的解决方案似乎对我没有帮助。我有一点点不同的设置,但也许这可能是问题。

React this.setState is not a function

this.setState is not a function

我知道React在这一年中发生了很大的变化(并经常这样做)这些问题得到了回答,所以想到这可能就是为什么它们不适合我。

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Platform, } from 'react-native';
import { Actions } from 'react-native-router-flux';

const Social = () => {
state = {
  name: ''
} 
return (
  <View style={ styles.container }>
    <Text style={ styles.Name } onPress={() => Actions.homepage()}>
      Enter your Name:
    </Text>

    <TextInput style={ styles.TextInput} placeholder='PrimeTimeTran' onChangeText={(text) => {
      this.setState({
         name: text,
      })
    }}
      value={this.state.name}
    />
    <TouchableOpacity
      onPress={() => {
        alert(self.state.name)
      }}
    >
      <Text style={ styles.buttonText }>
        Next
      </Text>
    </TouchableOpacity>
  </View>
 );
}

export default Social;

我在这里跟随tutorial(22:39),他似乎没有遇到任何问题。本教程是在2016年11月1日制作的,所以我相信他的语法应该没有问题。

还有一个可能重要的注释,

我看到的唯一区别是,对于我的构造函数,我没有使用render() return()而是使用return()本身;这可能是问题吗?

提前致谢!

1 个答案:

答案 0 :(得分:4)

Social 组件是无状态功能组件(使用()=&gt; {}语法创建;这是一个纯粹的javascript函数。因此 setState 将不可用。如果您需要组件来管理自己的状态,您需要通过扩展React.Component来创建它:

https://facebook.github.io/react/docs/react-component.html#setstate

因此,您可以按如下方式声明组件:

library(shiny)
library(ggplot2)
#library(ggiraph)
#library(htmltools)
library(lubridate)

shinyUI(fluidPage(

然后您就可以访问 setState 以及其他组件生命周期方法。

(你添加的附加说明也是因为你正在使用无状态功能组件 - 这些有效地实现了 render 功能,所以你可以看到只是 return 该功能的一部分。)