Node.js 将React功能组件转换为Hook

在尝试学习完整堆栈开发时，我在React Express Node basic应用程序上尝试了本教程（）。然而，它是使用功能组件而不是挂钩编写的。我正在尝试将此部分转换为钩子：

constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
}

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

componentWillMount() {
    this.callAPI();
}

使用“渲染”部分中的此选项：

<p className="App-intro">;{this.state.apiResponse}</p>

---

但是apiResponse的console.log始终显示为未定义。我知道我一定做错了什么，但我想不出来

你的尝试并不遥远

有两个问题：

问题1。

为了获得与

componentWillMount

相同的效果（旁注-这是一种不推荐使用的方法，请使用

componentDidMount

或

constructor

），您需要告诉

useffect

仅在装载时运行一次。为此，您给它一个空的依赖项数组

useffect（（）=>{
//做事
}, []); // 空数组作为第二个参数

通过不提供第二个参数，效果将运行每个渲染

问题2。

状态更新是异步的。这意味着您不能在更新日志后立即控制台log

apisresponse

，并期望它包含新值

要解决这个问题，只需将console.log放在钩子外部的函数体内部

以下是一个简化的示例：

const{useState，useffect}=React；
常量示例=（）=>{
常量[apiResponse，setApiResponse]=useState（）；
useffect（（）=>{
常量fetchApiResponse=（）=>{
常量结果='测试'；
SETAPIRESS（结果）；
//不会被更新
log（“错误：apiResponse”，apiResponse）；
}
fetchApiResponse（）；
}, []);
//将进行更新
log（“右：apiResponse”，apiResponse）；
返回
}
ReactDOM.render（，document.getElementById（'root'））

这不是答案，只是为了帮助：在功能组件中使用挂钩。您指的是要转换为功能组件的类组件。钩子是实际从react导入的内容，比如
useState
或
useffect
，而不是组件的类型。
setApiResponse
是异步的，这就是为什么设置值后不会立即看到更改的原因。另外，为什么要使用wait将字符串的值设置为静态值？
  const [apiResponse, setApiResponse] = useState();
   useEffect(() => {
     const fetchApiResponse = async () => {
       const result = await (
         'http://localhost:9000/testAPI'
       );
       setApiResponse(result);
       console.log("apiResponse " + apiResponse);
     };
     fetchApiResponse();
   });