在Reaction中异步MapJSX

f0ofjuux 于 2022-10-15 发布在 React

关注(0)|答案(2)|浏览(163)

我有一个异步功能，基本上从后端获取一个列表，我会创建一个FE上的html列表与这些元素。为此，我想在这张清单上画一张Map。问题是，由于它是一个异步函数的结果，似乎我需要添加一些细节。
根据我的搜索，我应该做一些类似的事情：

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();

reactjs

来源：https://stackoverflow.com/questions/73260946/asynchronously-map-jsx-in-react

2条答案

按热度按时间

bvn4nwqk1#

不能从组件异步返回JSX。将原始数据从JSX中分离出来--await原始数据的请求，将状态设置为在数据到达时触发重现器，然后构建JSX UI。

// Mock for demonstration
fetch = () => Promise.resolve({
  json: () => Promise.resolve([
    "some podcast",
    "some other podcast",
  ])
});
//

const ListItem = ({value}) => (
  <li>{value}</li>
);

const Podcasts = () => {
  const [podcasts, setPodcasts] = React.useState([]);

  React.useEffect(() => {
    fetch("/list_podcasts")
      .then(res => res.json())
      .then(data => {
        setPodcasts(data);
      });
  }, []);

  return (
    <div>
      {podcasts.length ? (
          <ul>
            {podcasts.map((e, i) =>
              <ListItem key={i} value={e} />)
            }
          </ul>
        ) : <div>Loading...</div>
      }
    </div>
  );
};

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<Podcasts />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

在JavaScript中使用camelCase，而不是snake_case，并且不要忘记向列表项添加唯一的key属性。

赞(0）回复(0）举报 2022-10-15

ldfqzlk82#

在呈现JSX元素时，您不需要等待Map。只要：

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

赞(0）回复(0）举报 2022-10-15

我来回答

在Reaction中异步MapJSX

2条答案

相关问题

热门标签

最新问答