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：未定义不是对象（正在评估“ 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挂钩来管理状态。

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({})。因此，您应该使用普通的类组件来调用this.setState或使用Hooks更新功能组件内部的状态。

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（{}），则应使用内部类组件。否则，您应该使用 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>
    );
  }
}

如有疑问，请随时

react-native：TypeError：未定义不是对象（正在评估“ this.state”）

4 个答案: