試圖將我的 api 調用從 App.js 移動到操作文件

Question

• 我有一個工作沙箱，其中我的操作文件位於 app.js https://codesandbox.io/s/redux-async-actions-d92bd
• 我試圖將我的 api 調用從 App.js 移動到操作文件
• 但現在我沒有在瀏覽器中獲取數據。
• 我通過放置控制台和檢查網絡選項卡進行調試。
• 但沒有運氣，你能告訴我如何解決它。
• 在下面提供我的代碼片段和沙箱。

https://codesandbox.io/s/redux-async-actions-b5d0t

  axios
              .get("https://reqres.in/api/users?page=2")
              // axios.get('https://jsonplaceholder.typicode.com/posts')
              .then(response => {
                // console.log("response.data.data---->", response.data.data);
                // console.log(
                //   "response.data.data[0].id---->",
                //   response.data.data[0].id
                // );
                //First of all we'll create the number of requestes base on the previous Response
                const promises = response.data.data.reduce(
                  (previousValue, { id }) => {
                    previousValue.push(
                      axios.get(
                        `https://jsonplaceholder.typicode.com/comments?postId=${id}`
                      )
                    );
                    // console.log(
                    //   " promises previousValue---->",
                    //   previousValue
                    // );

                    return previousValue;
                  },
                  []
                );

                // console.log("promises---->", promises);

                //We use the built in function to fetch the data
                axios.all(promises).then(responses => {
                  //Here you have all responses processed
                  const emailsMapped = responses.reduce(
                    (previousValue, { data }) => {
                      const emails = data.map(({ email }) => email);
                      previousValue.push(...emails);
                      // console.log(
                      //   "axios all previousValue---->",
                      //   previousValue
                      // );
                      return previousValue;
                    },
                    []
                  );
                  //You send the emails you want
                  this.props.onFetchSuccess(emailsMapped);
                  // console.log("CHECK");
                  // console.log(emailsMapped);
                });
              })
              .catch(err => {
                // this.props.onFetchError();
                // dispatchFunc({ type: "FETCH_DATA_ERROR", payload: err });
              });

Answer 1

您應該將 this.props 作為參數提供給您在 actions/index.js 中調用的 function。

你應該稱之為： fetchUsers(this.props)

在 actions/index.js fetchUsers(props) { props.onFetch(); ... props.onFetchSuccess(emailsMapped); } fetchUsers(props) { props.onFetch(); ... props.onFetchSuccess(emailsMapped); }

使用該參數而不是 this.props。

並使用const axios = require('axios');