Axiosの約束は、通常のJSON配列に変換します

SkyeBoniwell：

私は、関数からデータを返すようにしようとしているが、それは私に問題を与えています。

私はJSONを返すために、この機能を必要とするが、それは約束を返します。

ここでの機能は以下のとおりです。

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;

私は、返されたデータを使用しようとすると、それはこのエラーを投げています：

キャッチされない例外TypeError：data.mapは関数ではありません

私はコンソールに書き出す場合は、ここで私が見たものです。

data from machineParts API call:

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

しかし、ここで私はそれを返すために必要なものです：

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

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

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

等...

JSON配列に約束を変換するために、とにかくありますか？

ありがとう！

awran5：

あなたはただ呼びたい.then()あなたが呼び出した後に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;

今、そのようなあなたのコンポーネント内にそれをインポートします。

// 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

参照してください。サンドボックスの例を。