React 获取 Promise 返回值并赋值：async/await 实践指南

在 React 中，可以使用 async/await 获取 Promise 的返回值，并将其赋值给 state 或变量。例如：

import React, { useState, useEffect } from 'react';

function MyComponent() {  
  const [data, setData] = useState(null);

  useEffect(() => {    
    async function fetchData() {      
      const response = await fetch('/api/data');      
      const json = await response.json();      
      setData(json);    
    }    
    fetchData();  
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

在这个例子中，我们使用 async/await 获取 API 的数据，并将其赋值给 state 中的 data 变量。在组件渲染时，我们会根据 data 的值来渲染相应的 UI。当 data 为 null 时，我们会显示 'Loading...'，当 data 不为 null 时，我们会将数据渲染成一个列表。