将 Promise.all 结果存储到无状态 React 中的变量中 [重复]答案

【问题标题】：Store Promise.all result into variable in stateless React [duplicate]将 Promise.all 结果存储到无状态 React 中的变量中 [重复]
【发布时间】：2019-02-10 15:53:17
【问题描述】：

我正在尝试影响包含在数组中的所有 API。我使用 promise all 来获取数据，最终得到了我想要的数据。但是，我无法将结果从 Promise.all 函数存储到新数组或对象中。我如何将来自 API 的数据存储在 React 中的无状态组件上。所以这个方法的期望我可以称之为 {dataJSON.title}

import React from 'react'

const ApiComponent = (props) => {

  // props.film content
  //["https://swapi.co/api/films/2/","https://swapi.co/api/films/6/"]

  let dataJSON = []

  Promise.all(
    props.film.map(url =>
      fetch(url)
      .then(response => response.json())
      .then(
        parseJSON => ({
          title: parseJSON.title,
          episode: parseJSON.episode
        })
      )
      .then(
        dataJSON => push[dataJSON]
      )
    ))


  return (

    // expecting return will call like this 
    {
      dataJSON.title
    }

  )
}

export default ApiComponent;

【问题讨论】：

简短的回答是你不能。 Promise 是异步的。您需要使用状态或从更高级别传入数据
无状态真的是正确的方法吗？每次渲染这个组件时，它都会触发网络请求！如果要分离关注点，可以将组件拆分成container and a presentation component。
我注意到它是异步的，这就是为什么我想存储到新的对象/数组中，这样我就可以从新的对象/数组中调用数据。那是我在想是否可以使用这种方法

标签： javascript reactjs es6-promise

【解决方案1】：

如果你的组件是“无状态的”，那么它不应该根据定义存储任何东西，所以最好的办法是提供一个像 onAjaxComplete 这样的处理程序，以便在成功检索结果时调用结果。

const ps = {
  films: ["https://swapi.co/api/films/2/","https://swapi.co/api/films/6/"],
  onAjaxComplete: (results) => console.log('Here are the results:', results)
};

const ApiComponent = (props) => 
    Promise.all(props.films.map(url => fetch(url)
      .then(response => response.json())
      .then(json => ({
        title: json.title,
        episode: json.episode_id
      }))))
      .then(results => props.onAjaxComplete(results));

ApiComponent(ps);

onAjaxComplete 属性将采用一个函数来处理返回的结果，如果您使用 Redux 或类似的东西，您可以将结果传递到商店或其他任何地方。

或者，you might explore using async/await 如果您想尝试直接从函数返回已解析的承诺值。但真正的 async/await 只是语法糖，让处理异步代码变得更加必要。

编辑：正如其他人在上面的 cmets 中提到的那样，根据它与其他事物的集成方式，您可能会考虑不使其无状态以避免不必要的请求。或者根本不把它当成一个组件，只要把它变成一个函数，它需要一个 URL 列表来调用，一个回调来处理结果。

【讨论】：