javascript - react tsx 怎么在页面中请求接口？

Question

下图这是这个页面的所有代码，我想像vue的mounted一样，刚进页面就请求接口，请问我该怎么写？
另外，这应该属于是typescript吧？完全看不懂一脸懵

并且，我的接口不是固定地址，后端那可能会上传到不同的服务器，如何像vue一样配置proxy？
在这里先谢谢各位大哥大姐的解答，小弟感激不尽！

import Contorls from "./component/Contorls/Contorls";import homeRenderer from "./homeRender";import styles from './index.module.less';const Home = () => {    return (        <div className={styles.home}>            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>            <Contorls />        </div>    );}export default Home;

Answer 1

首先，你需要在你的 React 组件中创建一个生命周期方法，这个方法会在组件挂载到 DOM 时被调用。你可以使用 useEffect 钩子来达到这个目的。useEffect 钩子接受两个参数：一个是依赖项数组，另一个是当依赖项发生变化时要执行的函数。在你的情况下，你可以将空数组传递给 useEffect 钩子，这样你的函数就会在组件挂载时执行，而不是在每次依赖项发生变化时执行。

然后，你可以在 useEffect 钩子中调用你的 API 请求。

以下是一个示例代码：

import React, { useEffect } from 'react';import Contorls from "./component/Contorls/Contorls";import homeRenderer from "./homeRender";import styles from './index.module.less';const Home = () => {    useEffect(() => {        // 在这里调用你的 API 请求        fetch('/api/data')            .then(response => response.json())            .then(data => console.log(data))            .catch(error => console.error('Error:', error));    }, []); // 注意这里的空数组，它表示这个 effect 只会在组件挂载时运行    return (        <div className={styles.home}>            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>            <Contorls />        </div>    );}export default Home;

至于你的第二个问题，关于代理设置。如果你使用的是 Create React App 来创建你的 React 项目，那么你可以在你的 package.json 文件中设置一个 "proxy" 字段来配置你的代理。例如：

{  "name": "my-app",  "version": "0.1.0",  "proxy": "http://localhost:8080",  ...}

如果你不是使用 Create React App 来创建你的项目，那么你可能需要查看你所使用的构建工具或者服务器的文档来了解如何配置代理。