this.setState 在 onPress 中使用时不是函数

Question

我是 React Native 的新手，当未定义的错误被触发时，我正在为自己开发一个应用程序。

像我们大多数人一样，我在谷歌上搜索了可能是什么问题，这似乎是一个常见问题，但没有修复工作。我尝试了箭头函数和 .bind，但似乎没有任何效果。

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableWithoutFeedback,
  Button,
} from 'react-native';
//I'll use the other things I've imported later :-)

const App = () => {
  state = {text: 'Hello World'};

  return (
    <View>
      <Text style={styles.titleStyle}>Title Text</Text>

      <TouchableWithoutFeedback
        onPress={() => (this.setState({
          text: 'Goodbye World',
        }))}>
        <View style={styles.physView}>
          <Text style={styles.physTitle}>More Text</Text>
          <Text style={styles.physText}>{this.state.text}</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

目标只是在按下时将文本更改为 Goodbye World，但 setState is not a function 错误反而会触发。最终，我想让 Hello World 和 Goodbye World 在点击时切换回来和第四，但我还没有完全解决这个错误。

提前致谢，是的，它是虚拟文本。

Answer 1

请试试这个代码：

<TouchableWithoutFeedback onPress={ () => this.setState({ text: 'Goodbye World' }) }>

Answer 2

问题是您只是在第一次渲染组件时立即调用 this.setState(...)。

  <TouchableWithoutFeedback
onPress={this.setState({
  text: 'Goodbye World',
})}>

注意 this.setState() 是如何立即执行的，但是您要做的是传递一个可以稍后执行的函数。这可以通过将函数包装在另一个函数中来完成。所以如果你试试这个：

      <TouchableWithoutFeedback
    onPress={() => { this.setState({
      text: 'Goodbye World',
    }) }}>

它应该按预期运行。我所做的只是用箭头函数包装 this.setState(...) 使其变为 () => { this.setState(...) }

Answer 3

您使用带状态的功能组件。它不是那样工作的。功能组件不能有 setState 方法。

有两种选择：

// Use class syntax

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      text: 'Hello world!',
    }
  }
  
  onPress = () => {
    this.setState({text: 'Bye-bye'});
  }

  render() {
  
    return (
      <View>
        <Text style={styles.titleStyle}>Title Text</Text>

        <TouchableWithoutFeedback
          onPress={this.onPress}>
          <View style={styles.physView}>
            <Text style={styles.physTitle}>More Text</Text>
            <Text style={styles.physText}>{this.state.text}</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
};

// Use hooks

import {useState} from 'react'

const App = () => {

  const [text, setText] = useState('Hello World');

  return (
    <View>
      <Text style={styles.titleStyle}>Title Text</Text>

      <TouchableWithoutFeedback
        onPress={() => setText('Goodbye World');}>
        <View style={styles.physView}>
          <Text style={styles.physTitle}>More Text</Text>
          <Text style={styles.physText}>{this.state.text}</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

Answer 4

您不能将状态与功能组件一起使用。所以尝试使用 React Hooks.

Hooks 是 React 16.8 中的新增功能。它们让您无需编写 class. 即可使用状态和其他 React 功能 https://en.reactjs.org/docs/hooks-intro.html

import React, {useState} from 'react';
...
const App = () => {
  const [text, setText] =  useState('Hello World');

...

      <TouchableWithoutFeedback
        onPress={() => setText('Bye-bye')}>
...

this.setState 在 onPress 中使用时不是函数

this.setState is not a function when used at onPress

javascript

android

setstate

react-native