时间戳

首页 > 解决方案 > 在 ReactJS 应用程序中显示从 API 获取的项目

javascript - 在 ReactJS 应用程序中显示从 API 获取的项目

问题描述

我有这个函数，它基本上获取一组名称和图像。

  const displayCharacters = async () => {
    const currentCharacterList = filteredCharacters.map(character => character.name)

    const options = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({data : currentCharacterList})
    }


    const b = await fetch("/image",options)
    const result = await b.json(); 

    console.log(result);
    return result.map(res => (<p>{res.name}</p>));
  }

当我 console.log 结果我得到一个这样的数组：

(11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Luke Skywalker", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
1: {name: "R2-D2", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
2: {name: "Leia Organa", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
3: {name: "Chewbacca", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
4: {name: "Han Solo", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
5: {name: "Ackbar", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
6: {name: "Finn", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
7: {name: "Rey", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
8: {name: "Poe Dameron", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
9: {name: "BB8", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
10: {name: "Captain Phasma", image: "https://vignette.wikia.nocookie.net/starwars/image…rth_Vader_1.png/revision/latest?cb=20150128225029"}
length: 11
__proto__: Array(0)

但不知何故，我在尝试显示元素时收到以下错误：

react-dom.development.js:14748 Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我试图像这样渲染它：

<div>
   {selectedFilters.movie !== 'default' ? displayCharacters() : (<div>Please select a filter to get started</div>)}
</div>

标签： javascriptreactjspromise

解决方案

推荐阅读