React 中的異步 map JSX

Question

我有異步 function ，它基本上從后端獲取一個列表，我會在 FE 上用這些元素創建一個 html 列表。 為此，我想在該列表中執行 map。 問題是，由於它是異步 function 的結果，看來我需要添加一些細節。

根據我的搜索，我應該做類似的事情：

const listItems = await Promises.all( podcastList.map(
      (podcast) =>{
      <ListItem value = {podcast} />}
      ));

但是，我收到錯誤：

Compiled with problems:X

ERROR in ./src/App.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected reserved word 'await'. (21:20)

剩下的功能是：

function ListItem(props) {
  return <li>{props.value}</li>;
}

async function podcast_list() {
  let podcast_list;
  const headers = { 'Content-Type': 'application/json' };
  const res = await fetch('/list_podcasts', { method: 'GET',headers});
  podcast_list = await res.json();
  console.log(podcast_list);
  return podcast_list
}
podcastList = podcast_list();

Answer 1

JSX 不能從組件異步返回。 將原始數據與 JSX 分開—— await原始數據的請求，設置 state 以在數據到達后觸發重新渲染，然后構建 JSX UI。

 const {useEffect, useState} = React; // Mock for demonstration fetch = () => Promise.resolve({ json: () => Promise.resolve([ "some podcast", "some other podcast", ]) }); // const ListItem = ({value}) => ( <li key={value}>{value}</li> ); const Podcasts = () => { const [podcasts, setPodcasts] = useState([]); useEffect(() => { fetch("/list_podcasts").then(res => res.json()).then(data => { setPodcasts(data); }); }, []); return ( <div> {podcasts.length? ( <ul> {podcasts.map(e => <ListItem value={e} />)} </ul> ): <div>Loading...</div> } </div> ); }; ReactDOM.render(<Podcasts />, document.querySelector("#root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>

在 JavaScript 中使用camelCase ，而不是snake_case ，並且不要忘記為列表項添加唯一key屬性。

Answer 2

渲染 JSX 元素時，您無需在地圖上等待。 只是：

const listItems = podcastList.map((podcast) => <ListItem value={podcast} />)