React 使用 useEffect 监听接口请求并发起请求

在 React 中使用useEffect钩子来发起请求并监听另一个接口的请求，可以按照以下步骤进行操作：\n\n1. 导入useEffect和useState钩子：\n\njsx\nimport React, { useEffect, useState } from 'react';\n\n\n2. 创建一个函数组件并定义一个状态变量来存储接口返回的数据：\n\njsx\nfunction MyComponent() {\n const [data, setData] = useState(null);\n \n // useEffect钩子用于监听另一个接口的请求\n useEffect(() => {\n // 在这里发起第二个接口的请求\n fetch('https://api.example.com/second-api')\n .then(response => response.json())\n .then(data => {\n // 处理返回的数据\n setData(data);\n });\n }, []); // 空数组作为第二个参数，确保只会在组件挂载时执行一次\n \n return (\n <div>\n // 渲染接口返回的数据\n {data && <p>{data.message}</p>}\n </div>\n );\n}\n\n\n在上述代码中，我们创建了一个名为MyComponent的函数组件，并在组件内部使用useState钩子来定义一个名为data的状态变量，用于存储接口返回的数据。然后，我们使用useEffect钩子来监听另一个接口的请求。在useEffect的回调函数中，我们使用fetch函数发起第二个接口的请求，并使用.then方法处理返回的数据，将其存储到data状态变量中。最后，在组件的返回值中，我们渲染了接口返回的数据。\n\n请注意，上述代码中的fetch函数是使用fetch API来发起网络请求的示例。你可以根据自己的需求使用任何其他的网络请求库。