反应 - 类型错误：无法读取未定义的属性'setState'(箭头函数)

Question

我无法使用setState。我的代码看起来像：

const FormComp = () => {
const [reader, setReader] = React.useState(0);
//rest of the code
};
const Ques1 = () => {
return (
<>
<button onClick={() => {
this.setState({ reader: "1" });
}}>Click</button>
</>
)
};

这只是代码的一个简短版本。我在这方面遇到了问题。请有人帮我。此代码在同一文件中。更新：尝试了setReader，但它抛出一个错误，称setReader未定义

Answer 1

当您使用React.useState时，您不执行this.setState，在本例中，您只执行：

<button onClick={() => {
setReader("1");
}}>Click</button>

Answer 2

应该这样使用：

import React from 'react';
function App() {
const [reader, setReader] = React.useState(0);
const FormComp = () => {
//rest of the code
return <div>Clicked {reader} times</div>
};

const Ques1 = () => {
return (
<button onClick={() => setReader(reader+1)}>Increase</button>
)
};
return (
<div className="App">
<FormComp />
<Ques1 />
</div>
);
}
export default App;

您可以在setReader函数中设置您想要的任何值。

Answer 3

因为您使用的是useState钩子，所以应该调用setReader而不是this.setState。

Answer 4

当您使用react钩子和功能组件时，您可以(暂时(放弃有关this.setState 的概念

要将this.setState({ reader: "1" })用于const [reader, setReader] = React.useState(0);，请使用State Hook。您应该使用setReader(1)或setReader("1")(根据您的旧"this.setState({reader: "1"})"(

点击按钮类似：

<button onClick={() => setReader(1)}>
Click
</button>

Answer 5

您的代码中存在两个问题。

1. 您使用的是setState，而使用的是反作用钩子useState
2. useState正在一个组件中使用，试图在另一个组件上访问它

所以，决定你在哪里需要它，或者你想把它作为道具和/或提升状态？

使用：

onClick={() => setReader(1)}