react-native : TypeError:undefined is not an object (evalating 'this.state')

Question

我是 react-native 的新手，学习完整的代码。但我无法理解“const”在导出之前和渲染之后的区别。例如：

const { height, width } = Dimensions.get("window");

export default class App extends React.Component {
  state = {
    newToDo: ""
  };
  render() {
    const { newToDo } = this.state;

我之所以问这个是因为我的第一个初始化不是“导出默认类 App 扩展 React.Component {”而是“导出默认函数 App(){”。所以我不能分配 const 或分配它，它会导致显示消息的错误

TypeError:undefined is not an object (evalating 'this.state')

这是我的代码：

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  TextInput,
  Platform,
  ScrollView
} from "react-native";
import ToDo from "./ToDo";

const { height, width } = Dimensions.get("window");
export default function App() {
  const state = {
    newToDo: ""
  };
  const { newToDO } = this.state;
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>Good or Bad</Text>
        <Text style={styles.subTitle}>Check Daily your habit</Text>
      </View>

      <View style={styles.content}>
        <Text style={styles.contentTitle}>To Do List</Text>
        <TextInput
          style={styles.input}
          placeholder={"New to do"}
          value={newToDO}
          onChangeText={this._controllNewToDo}
          returnKeyType={"done"}
          autoCorrect={false}
        />
        <ScrollView>
          <ToDo />
        </ScrollView>
      </View>
    </View>
  );

  _controllNewToDo = text => {
    this.setState({
      newToDO: text
    });
  };
}

Answer 1

您不能在功能组件中使用this.setState({})。所以你应该使用一个普通的类组件来调用this.setState 或者使用 Hooks 来更新函数组件内部的状态。

Answer 2

import React, {Component} from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  TextInput,
  Platform,
  ScrollView
} from "react-native";
import ToDo from "./ToDo";

const { height, width } = Dimensions.get("window");

class App extends Component {
  state = {
    newToDo: ""
  };

 _controllNewToDo = text => {
    this.setState({
      newToDO: text
    });
  };

render(){
  const { newToDO } = this.state;
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>Good or Bad</Text>
        <Text style={styles.subTitle}>Check Daily your habit</Text>
      </View>

      <View style={styles.content}>
        <Text style={styles.contentTitle}>To Do List</Text>
        <TextInput
          style={styles.input}
          placeholder={"New to do"}
          value={newToDO}
          onChangeText={this._controllNewToDo}
          returnKeyType={"done"}
          autoCorrect={false}
        />
        <ScrollView>
          <ToDo />
        </ScrollView>
      </View>
    </View>
  );
 }
}

export default App;

试试这个代码！

Answer 3

正如我在下面提到的，如果你需要使用 state 和 setState({}) 你应该使用内部类组件。否则你应该使用Hooks，check this。我想这会帮助你理解。

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  TextInput,
  Platform,
  ScrollView,
} from 'react-native';

const { height, width } = Dimensions.get('window');

export default class App extends React.Component {
  state = {
    newToDo: 'wwe',
  };

  _controllNewToDo = text => {
    this.setState({
      newToDO: text,
    });
  };

  render() {
    const { newToDO } = this.state;
    return (
      <View>
        <View>
          <Text>Good or Bad</Text>
          <Text>Check Daily your habit</Text>
        </View>

        <View>
          <Text>To Do List</Text>
          <TextInput
            style={{ height: 60 }}
            placeholder={'New to do'}
            value={newToDO}
            onChangeText={this._controllNewToDo}
            returnKeyType={'done'}
            autoCorrect={false}
          />
          <ScrollView
            style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Text>{newToDO}</Text>
          </ScrollView>
        </View>
      </View>
    );
  }
}

欢迎质疑

Answer 4

在功能组件中，您可以使用 useState 挂钩来管理状态。试试这个，

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  TextInput,
  Platform,
  ScrollView
} from "react-native";
import ToDo from "./ToDo";

const { height, width } = Dimensions.get("window");
export default function App() {
  const [newToDo, setNewToDo] = useState("");
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>Good or Bad</Text>
        <Text style={styles.subTitle}>Check Daily your habit</Text>
      </View>

      <View style={styles.content}>
        <Text style={styles.contentTitle}>To Do List</Text>
        <TextInput
          style={styles.input}
          placeholder={"New to do"}
          value={newToDo}
          onChangeText={_controllNewToDo}
          returnKeyType={"done"}
          autoCorrect={false}
        />
        <ScrollView>
          <ToDo />
        </ScrollView>
      </View>
    </View>
  );

 const _controllNewToDo = text => {
    setNewToDo(text);
  };
}