javascript - this.setState React Native

Question

我 4 天前开始学习 React Native。我正在尝试传递一个属性 this到另一个Scene ，但是，我不断遇到此错误 _this.setState is not a function 。我相信这不是重复的，因为我已经阅读了这两个堆栈答案，并且他们的解决方案似乎对我没有帮助。我有一些不同的设置，但我认为这可能是问题所在。

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()通过它自己;这可能是问题所在吗？

提前致谢!

Answer 1

您的社交组件是一个无状态功能组件(此处使用 () => {} 语法创建)；这是一个纯 JavaScript 函数。因此setState将不可用。如果您需要组件来管理其自己的状态，您需要通过扩展 React.Component 来创建它:

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

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

class Social extends React.Component {
  //...implementation here
}

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

(您添加的附加注释也是因为您使用的是无状态功能组件 - 这些组件有效地实现了渲染函数，因此您看到的只是返回值> 该功能的一部分。)