0

I'm currently working on some code that calls an async function and has a Promise returned. The call history is not important, but I'll include all relevant code.

function Bookshelf(props) {
  const { genre } = props;

  const books = [];

  const arrayOfPromises = [];

  arrayOfPromises.push(getBooksUnderGenre(genre)) // this is the async function
  Promise.all(arrayOfPromises)
    .then(results => {
        console.log(results);
        const result = results[0];
        books.push(result);
    });

  books.map((book, i) => {
    return (
        <Text> {book.name} </Text>
    )
  });
};

My problem here, is when I console.log(results), I clearly see all of the results I wish to have in my terminal, yet const books = [] is empty so I'm essentially mapping over nothing. Is there a way I can do this without making Bookshelf asynchronous itself? If not, what would I have to do?

For reference, this is what I get when I log results

[
  [
    {
      genre: "fantasy",
      id: "19",
      type: "book",
      name: "Star Night",
    },
    {
      genre: "fantasy",
      id: "20",
      type: "book",
      name: "A Moon Far Away",
    },
    {
      genre: "fantasy",
      id: "21",
      type: "book",
      name: "Green Lands",
    },
  ],
];

(Just a note, I typed this all so if there are any typos / syntax errors, it's not like that in my code, so that wouldn't be a problem).

nalabof679
  • 59
  • 1
  • 6
  • 1
    You have `books = []` right before `books.map()` so the array will always be empty. What are you expecting to map over? – Barmar Jan 25 '23 at 19:33
  • I want to fill `books` with the content of `results` from resolving the `Promise`. When I try to do something like `books.push(...results[0])`, the array never fills up. Let me move the statement above though, I placed it incorrectly. Updated the post. – nalabof679 Jan 25 '23 at 19:34
  • Anything that uses the results of `promise.all()` has to be in the `.then()` function. – Barmar Jan 25 '23 at 19:35
  • Why are you using `Promise.all()` when you only have one promise? – Barmar Jan 25 '23 at 19:35
  • Your brackets aren't matched up in the code. Please post valid syntax. – Barmar Jan 25 '23 at 19:36
  • I'm just having one promise, but I plan to have more later. Right now, this is what I'm working with (sorry about the syntax, updated the post after checking in my editor that the syntax is ok). I tried putting everything inside of the `then`, but I can't return the component inside of a then. – nalabof679 Jan 25 '23 at 19:38
  • `Bookshelf()` needs to return a promise that resolves to the returned data. Using `async/await` would make this easier to write. – Barmar Jan 25 '23 at 19:38
  • Are you trying to render the data in JSX? – Unmitigated Jan 25 '23 at 19:40
  • Yes, I'm trying to render the data in JSX. I'm struggling with separating the logic out, if needed, to get the data I need into `books` so I can map over it when rendering the component. – nalabof679 Jan 25 '23 at 19:40
  • Why are you only pushing `results[0]`? Why not set `books` to the entire array of results? – Barmar Jan 25 '23 at 19:40
  • Because it's an array inside of an array, and I just want the array containing all the data. That way I can loop through each item and extract `name` – nalabof679 Jan 25 '23 at 19:41
  • Then I think you want `books = results.map(el => el[0])` to get the first element of each result. – Barmar Jan 25 '23 at 19:41
  • That's a fair point, thanks for that. That would only work once I resolve the issue of `books` being empty though due to the async/await nature. – nalabof679 Jan 25 '23 at 19:42
  • Honestly , since you are using react over here , you need to store that as state . And then you you would want to use a useEffect to control when you should do something to that state , to reduce the amount of queries you make to your backend api check this library out : https://react-query-v3.tanstack.com/ it is really simple and does all the heavy lifting regarding use effect and stuff like that . its also very well documented – Darren Jan 25 '23 at 19:44

0 Answers0