在react for react hook中未定义setValue

Question

我收到一个错误，说我的代码的setValue部分没有定义，但我在主函数的底部定义了。不确定发生了什么。

import React, {useState} from "react"; 
const updateAPI = () => {
setValue("test"); 
}
export default function App() {
const [value, setValue] = useState(""); 
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={updateAPI}></button>
<p>{value}</p>
</div>
);
}

Answer 1

按以下方式重新构造代码并尝试，

import React, {useState} from "react"; 
export default function App() {
const updateAPI = () => {
setValue("test"); 
}
const [value, setValue] = useState(""); 
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={updateAPI}>HI</button>
<p>{value}</p>
</div>
);
}

Answer 2

您的updateAPI函数找不到setValue useState钩子，因为它们不在同一范围内。

import React, {useState} from "react"; 

export default function App() {
const [value, setValue] = useState(""); 
const updateAPI = () => {
setValue("test"); 
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={updateAPI}></button>
<p>{value}</p>
</div>
);
}