Próbuję zwrócić dane z funkcji, ale powoduje to problemy.

Potrzebuję tej funkcji, aby zwrócić JSON, ale zwraca ona obietnicę.

Oto funkcja:

import axios from 'axios';

const fetchData = async () => {
  const result = await axios(
    'https://localhost:44376/api/parts',
  );
  return JSON.stringify(result, null, 2);
};

export default fetchData;

Wyrzuca ten błąd, gdy próbuję użyć zwróconych danych:

Uncaught TypeError: data.map nie jest funkcją

Kiedy piszę do konsoli, oto co widzę:

data from machineParts API call:

Promise {<pending>}
 [[PromiseStatus]]: "resolved"
    [[PromiseValue]]: {"data": [ { "id": 5, "title": "Steel Rods", "partId": 39482  etc...

Ale oto, czego potrzebuję, aby zwrócić:

data from machineParts API call: (7) [ {...}, {...}, {...}, {...}, {...}, {...}, {...}]

0:
   id: 5
   title: "Steel Rods"
   partId: 39482

1:
   id: 23
   title: "Honed Cylinder head"
   partId: 23412      

Itp...

Czy mimo wszystko można przekonwertować obietnicę na tablicę JSON?

Dzięki!

2
SkyeBoniwell 3 kwiecień 2020, 18:31

3 odpowiedzi

Najlepsza odpowiedź

Chcesz tylko wywołać .then() po wywołaniu funkcji fetchData:

// fetchData.js
import axios from "axios";

const fetchData = async () => {
  const result = await axios(
    'https://localhost:44376/api/parts',
  );
  // return the result
  return result;
};

export default fetchData;

Teraz zaimportuj go do swojego komponentu, tak:

// App.js 
import fetchData from './fetchData' // fetchData path

const App = () => {
  const [data, setData] = React.useState([])

  React.useEffect(() => {

   fetchData().then(res => {
     setData(res.data)
   })
  },[])

  return (
    <div>
      <pre>
        <code> {JSON.stringify(data, null, 2)} </code>
      </pre>
    </div>
  )
}

export default App

Zobacz przykład piaskownicy.

5
awran5 3 kwiecień 2020, 15:52

async i await to po prostu inna składnia do obsługi obietnic, 'await' działa mniej więcej tak samo, jak łączenie .then w wywołaniu axios. Coś takiego powinno działać w module:

const fetchData = async () => {
  const response = await axios.get('https://localhost:44376/api/parts');
  return response.data;
};

Ponieważ fetchData() jest funkcją async, zwróci Promise, więc kod wywołujący będzie musiał albo await wynikać z wyniku, albo użyć składni .then, aby uzyskać dostęp dane wynikowe.

2
Chris Brenberg 3 kwiecień 2020, 20:54

Odpowiedź znajduje się w udostępnionej konsoli, wiersz zaczynający się od data from machineParts API call:. Tablica jest zagnieżdżona pod właściwością data.

JSON.stringify {{0}}} rujesz również wynik, co uczyniłoby go ciągiem znaków, a nie łańcuchem ani obiektem. Dlatego widzisz błąd data.map is not a function, ponieważ string nie ma prototypowej metody o nazwie map.

Aby naprawić, zmień return JSON.stringify(result, null, 2); na return result.data;.

1
sdotson 3 kwiecień 2020, 15:38