javascript - 使用 URL 映射对象以返回对象

Question

我像这样循环遍历这个数组：

{props.choosenMovie.characters.map((characters) => (
   <p>{characters}</p> /* This displays the URL of course */
))}

这些 URL 包含我想要显示的名称对象，这样做的最佳做法是什么？

---

这就是它在我的应用程序上的显示方式，但希望显示来自 URL 的名称对象。

标签： javascriptreactjs

Answer 1

在 useEffect 中，映射到您的 url 数组并进行 api 调用并将 Promise 存储在数组中。使用 promise.all 并更新将导致重新渲染的状态。

在渲染方法中，通过更新的状态映射并显示名称。

看工作演示

代码片段

export default function App() {
  const [char, setChar] = useState([
    "https://swapi.dev/api/people/1/",
    "https://swapi.dev/api/people/2/"
  ]);
  const [people, setPeople] = useState([]);
  useEffect(() => {
    const promiseArray = [];
    char.forEach(c => {
      promiseArray.push(fetch(c).then(res => res.json()));
      Promise.all(promiseArray).then(res => {
        console.log("res", res);
        setPeople(res);
      });
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {people.map((p, i) => {
        return <p key={i}>{p.name}</p>;
      })}
    </div>
  );
}