我不能在函数上使用“this”

Question

我是 React Native 的新手。我想创建一个简单的计数器按钮。我不能使用“this”，它会给出错误（“this”隐含类型“any”，因为它没有类型注释。）。你可以在下面看到我的 TabTwoScreen.tsx TypeScript 代码。我搜索了其他问题，但找不到该怎么做。为什么这不起作用，我该如何纠正它。等待帮助。非常感谢。

import * as React from 'react';
import { StyleSheet, Button, Alert } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';

export default function TabTwoScreen() {
  const state={
    counter: 0,
  }

  const but1 = () => {
    this.setState({counter : this.state.counter + 1});
  };


  return (
    
    <View style={styles.container}>
      <Text style={styles.title}>Counter:{state.counter}</Text>
      <Button
              title="Increment"
              onPress={but1}
              accessibilityLabel="increment"
              color="blue"
            />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});

Error Message

Answer 1

应用输出：

import React, { useState } from 'react';
import { StyleSheet, Button, Alert, Text, View } from 'react-native';

export default function TabTwoScreen() {
  // ? You are using functional components so use the useState hook.
  const [counter, setCounter] = useState(0);

  const but1 = () => {
    // ?then you can increase the counter like below 
    setCounter(counter + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter:{counter}</Text>
      <Button
        title="Increment"
        onPress={but1}
        accessibilityLabel="increment"
        color="blue"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

如果你想使用基于类的组件，那么这里是实现：

import React, { useState, Component } from 'react';
import { StyleSheet, Button, Alert, Text, View } from 'react-native';

export default class TabTwoScreen extends Component {
 
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }

  but1 = () => {
    this.setState({ counter: this.state.counter + 1 });
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Counter:{this.state.counter}</Text>
        <Button
          title="Increment"
          onPress={this.but1}
          accessibilityLabel="increment"
          color="blue"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

工作应用程序：Expo Snack

Answer 2

请看https://reactjs.org/docs/react-component.html#setstate 从您的代码中删除它，只让 state.count + 1

我在 freedcodecamp 中做的一个例子。

    handleChange(event){
    //event.target.value
    this.setState({
      input: event.target.value
    });
  }
  // Change code above this line
  render() {
    return (
      <div>
        { /* Change code below this line */}
        <input value={this.state.input} onChange={(e) => this.handleChange(e)}/>

Answer 3

那是因为您使用的是function component。您必须使用class based component (React class and function components) 或使用useState 挂钩切换到React hooks。

这是带有class based component 的示例：

import * as React from 'react';
import { StyleSheet, Button, Alert } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';

export default class TabTwoScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  but1() {
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Counter:{state.counter}</Text>
        <Button
          title="Increment"
          onPress={this.but1}
          accessibilityLabel="increment"
          color="blue"
        />
      </View>
    );
  }
}

这里是React hooks：

import React, {useState} from 'react';
import { StyleSheet, Button, Alert } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';

export default function TabTwoScreen() {
  const [counter, setCounter] = useState(0);

  const but1 = () => {
    setCounter(counter + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter:{counter}</Text>
      <Button
        title="Increment"
        onPress={but1}
        accessibilityLabel="increment"
        color="blue"
      />
    </View>
  );
}