Question

我创建了一个<FlatList />包含<Text />，我想点击每个<Text />可以更改this.state。

但是当我点击它会显示错误：

this.setState is not a function

为什么呢？

这是我的<FlatList />：

render() {
    return (
      <View>

        <FlatList
          ListHeaderComponent={() => (
            !cityArray.length ? (
              <View style={{ height: 300 }}>
                <Text style={styles.sectionTitle}>
                  Show empty message...
                </Text>
              </View>) : null
          )}
          data={cityArray}
          renderItem={this.renderItem} 
          horizontal={true}
          keyExtractor={(item, index) => index.toString()}
        />

      </View>
    );
  }

以下是我的renderItem功能：onPress将显示错误

renderItem({ item }) {
    return (
      <View style={styles.headerView}>
        <TouchableOpacity 
          onPress={() => {
            this.setState({ test: 'test press' });
          }}
        >
          <Text>{item.cnCity}</Text>
        </TouchableOpacity>
      </View>      
    );
  }

我的this.state：

  constructor(props) {
    super(props);
    // this.renderRow = this.renderRow.bind(this);
    this.state = { tickets: [], selectedOption: '', theaters: [], test: '' };
  }

我尝试创建另一个函数：

  testPress = () => {
    this.setState({ test: 'test function' });
  }

并使用它：

renderItem({ item }) {
    return (
      <View style={styles.headerView}>
        <TouchableOpacity 
          onPress={() => {
            this.testPress();
          }}
        >
          <Text>{item.cnCity}</Text>
        </TouchableOpacity>
      </View>      
    );
  }

它仍然显示相同的错误。为什么？我无法理解。

任何帮助将不胜感激。

Answer 1

检查这件事
首先保存参考this

 let context;
    class s extends Component{
         constructor(props) {
        super(props);
        // this.renderRow = this.renderRow.bind(this);
        this.state = { tickets: [], selectedOption: '', theaters: [], test: '' };
        context=this;
      }

     }

你在onpress

  <TouchableOpacity 
      onPress={() => {
        context.setState({ test: 'test press' });
      }}
    >

为什么这不起作用？

这在js中被称为上下文的关键字，它只依赖于调用者，所以当我们从其他函数调用一个函数时，它将使用函数上下文，其中没有任何状态
解决方案是绑定函数或保存引用，有时您可以使用无名函数
有关详细信息，请访问How to access the correct `this` inside a callback?

为什么this.setState不是函数？

1 个答案:

为什么这不起作用？