Question

我正在尝试使用数组中包含的所有API。我使用promise all来获取数据，最后得到所需的数据。但是，我在将结果存储到Promise.all函数的新数组或对象中时遇到问题。我如何在React中的无状态组件上存储来自API的数据。因此，在这种方法中，我可以像{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;

Answer 1

如果您的组件是“无状态的”，则它不应按定义存储任何内容，因此似乎最好的方法是提供一个类似onAjaxComplete的处理程序，以在成功检索结果时使用结果进行调用。 / p>

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只是语法糖，使处理异步代码变得更加必要。

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

将Promise.all结果存储到无状态React中的变量中

1 个答案: