React实战：JavaScript开发者如何巧用async/await处理异步操作

在React中，我们可以使用async/await来处理异步操作。以下是一个简单的例子： ```jsx import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState(null); useEffect(() => { async function fetchData() { const response = await fetch('https://api.example.com/data'); const json = await response.json(); setData(json); } fetchData(); }, []); if (!data) { return <div>Loading...</div>; } return ( <div> <h1>Data:</h1> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); } export default App; ``` 在这个例子中，我们使用了`useEffect`钩子来在组件挂载后获取数据。`fetchData`函数是一个异步函数，我们使用`await`关键字来等待数据的获取和解析。当数据获取成功后，我们使用`setData`函数来更新组件的状态。 注意，我们在`useEffect`的依赖数组中没有传入任何参数，这意味着这个函数会在组件挂载后立即执行一次，然后在组件卸载时执行清理操作。这是因为我们只需要在组件挂载后获取数据，而不需要在其他时间获取数据。 ######[AI写代码神器 | 276点数解答 | 2023-11-09 01:54:47]