无法在 js 反应原生中设置状态

Question

在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不是一个对象(求值'_this.setState')

Answer 1

useState Hook

功能组件不能访问setState方法，只能访问useState钩子。

useState钩子通过定义值的名称来工作，例如，foo后面跟着它的setter。惯例是用set来命名与value相同的setter。前缀，即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} />;
};

Answer 2

功能组件不允许使用this.setState。试着用React.useState代替currentDate

const [currentDate, setCurrentDate] = React.useState("");
...
const setCurentDate = (val) => {
setCurrentDate(val);
};

Answer 3

我觉得你有点搞混了

如果你使用Class component

，请替换此语法。

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

:

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

，看一下文档