无法在 js react-native 中设置状态答案

【问题标题】：Can't set state in js react-native无法在 js react-native 中设置状态
【发布时间】：2021-04-27 16:06:15
【问题描述】：

在 React Native 中尝试 setState 时出错。

代码

import React from "react";
import { TextInput, Text, View, Button, Alert } from "react-native";

const UselessTextInput = () => {
  state = { currentDate: "" };

  const setCurentDate = (val) => {
    this.setState({currentDate : val});
  };

  const [value, onChangeText] = React.useState("");

  return (
    <View>
      <Text
        style={{
          alignSelf: "center",
          marginTop: 60,
          fontWeight: "bold",
          fontSize: "25",
        }}
      >
        BirthReminder
      </Text>
      <Text style={{ alignSelf: "center", marginTop: 15, fontSize: 15 }}>
        Enter your friend's birthdate, please
      </Text>
      <TextInput
        clearTextOnFocus={true}
        style={{
          height: 40,
          borderColor: "gray",
          borderWidth: 1,
          marginTop: 20,
          width: 250,
          alignSelf: "center",
        }}
        onChangeText={(value) => setCurentDate(value)}
        value={value}
      />
      <Button title="Add to list"></Button>
    </View>
  );
};

export default UselessTextInput;

错误

TypeError: undefined is not an object (evalating '_this.setState')

【问题讨论】：

你应该在帖子中而不是在要点中发布代码
功能组件使用useState钩子来使用状态

标签： javascript reactjs react-native react-hooks setstate

【解决方案1】：

useState 挂钩

功能组件无法访问setState 方法，但可以访问useState 钩子。

useState 钩子通过定义值的名称来工作，例如foo 后跟它的二传手。按照惯例，将 setter 命名为与带有 set 前缀的 value 名称相同的名称，即 setFoo

const [foo, setFoo] = useState('hi');
// pass the initial value here -^^-

解决方案

import { useState } from 'react';
import { TextInput } from 'react-native';

const Component = () => {
  const [value, setValue] = useState('');

  return <TextInput value={value} onChangeText={setValue} />;
};

【讨论】：

【解决方案2】：

this.setState 不允许在功能组件中使用。尝试将React.useState 用于currentDate

const [currentDate, setCurrentDate] = React.useState("");

...

const setCurentDate = (val) => {
    setCurrentDate(val);
};

【讨论】：

【解决方案3】：

我觉得你有点搞混了

如果使用 Class 组件，请替换它，因为这是语法

  state = { currentDate: "" };
  const setCurentDate = (val) => {
    this.setState({currentDate : val});
  };

与：

  const [date, setDate] = React.useState();
  const setCurentDate = (val) => {
    setDate(val);
  };

看看documentation

【讨论】：