react-native：TypeError：undefined 不是 object（正在評估“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;

為什么我問這個是因為我的第一個 init 不是“export default class App extends React.Component {”而是“export default function App() {”。 所以我不能分配 const 或分配它，它會導致顯示消息的錯誤

TypeError:undefined 不是 object（評估 '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

在功能組件中，您使用 useState 掛鈎來管理 state。試試這個，

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);
  };
}

Answer 2

您不能在功能組件中使用this.setState({}) 。 所以你應該使用一個普通的 class 組件來調用this.setState或使用 Hooks 來更新功能組件內部的 state 。

Answer 3

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 4

正如我在下面提到的，如果您需要使用state和setState({}) ，您應該在 class 組件內部使用。 否則你應該使用Hooks ，檢查這個。我認為這會幫助你理解。

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>
    );
  }
}

有疑問請隨意