ReactJs Redux數據獲取

Question

我剛剛開始從事React Js和Redux-Thunk的開發。 目前，我正在嘗試使用redux-thunk從URL獲取數據。 我成功獲取了數據，但問題是它兩次渲染undefined數據，然后在道具中給了我所需的數據。 這是我的代碼。

在Actions index.js中

function getData() {
 return {
    type: 'FETCH'
 }
}

function getSuccess(data) {
 return {
    type: 'FETCH_SUCCESS',
    payload: data
 }
}

function getFailed(err) {
 return {
    type: 'FAILED',
    payload: err
 }
   }

export function fetchData() {
const thunk = async function thunk(dispatch) {
    try {
        dispatch(getData());
        const body = await fetch("http://jsonplaceholder.typicode.com/users")
        const res = await body.json();
        console.log("Thunk", res);
        dispatch(getSuccess(res));
    }
    catch(err) {
        dispatch(getFailed(err));
    }
}
return thunk;
}

在Reducers fetch.js中

const initialState = {
 state: []
}

export default function(state=initialState , actions) {
switch(actions.type) {
    case 'FETCH':
        return {
            ...state
        }
    case 'FETCH_SUCCESS':
        return {
            ...state,
            data: actions.payload
        }
    case 'FAILED':
        return {
            ...state
        }
    default:
        return state;            
}
}

減速器Index.js

import fetch from './fetch';
import { combineReducers } from 'redux';

const rootReducer = combineReducers ({
    fetch
});

export default rootReducer;

App.js

import React, { Component } from 'react';
import './App.css';
import Main from './component/Main';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);
console.log("STore", store.getState());
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Main/>        
      </Provider>
    );
  }
}

export default App;

Main.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
class Main extends Component {


    componentWillMount() {
        const { fetchData } = this.props
        fetchData();
    }

    render() {
        let mydata = this.props.data.data;
        console.log("Data .....<>", mydata);
        return(
            <div>
                Main     
            </div>
        );
    }
}


const mapStateToProps =(state)=> {
    return {
        data: state.fetch
    }
}

export default connect(mapStateToProps, {fetchData: actions.fetchData})(Main);

輸出屏幕截圖

請讓我知道我在做什么錯。 任何幫助將不勝感激。 謝謝

Answer 1

此行為是正確的。 你正在做的正常方式的一切，除了在調用異步操作componentWillMount方法，而不是componentDidMount 。 在此處了解更多信息。

您需要知道，當您使用componentDidMount -由於組件生命周期中的commit階段，您可以安全地處理此問題，這意味着您的請求將被確保觸發一次，而不是可能觸發多次（可以在render階段） 。

請參閱此處的可視圖以了解更多信息。

關於幾個效果圖-可以很容易地解釋。 第一次，在安裝組件時，您正在調用異步操作，與組件安裝相比，它需要更多的時間來加載數據。 這就是為什么要訪問initialState的data屬性（它是空數組）並獲取undefined 。

當您准備好響應並調度操作時，redux會觸發以新狀態重新渲染連接的組件。

如果要使async-await語法有效，則還應使用async關鍵字進行生命周期設置，然后await內部await請求。

注意 ：這是安全的，但是在某些情況下可能會導致意外的錯誤，因此請記住。 但是， 我不建議以這種方式使用它。 在SO的另一個線程中了解此主題。

我建議您在化isLoading創建一些isLoading布爾狀態，並跟蹤是否加載了數據。

祝好運！ 希望對您有所幫助！

Answer 2

您的代碼沒有錯，但是有一個不必要的動作。 為什么看到兩次undefined然后看到數據？

1. 第一個來自初始渲染。 您正在componentWillMount中進行異步調度，因此render不會等待它，然后嘗試記錄數據。 當時它是undefined 。

2. 您的fetchData調度兩個操作： getData和getSuccess 。 由於getData動作，您會看到第二個undefined狀態，因為它返回當前狀態， props.data.data再次未定義。

3. 您會看到數據，因為getSuccess現在getSuccess更新您的狀態。

如果要在fetchData函數中測試出getData的fetchData ，只需使用getSuccess並在render中更改console.log ，如下所示：

mydata && console.log("Data .....<>", mydata);

我認為getData操作在這里是不必要的，除了返回當前狀態外，它不執行任何操作。 另外，請嘗試使用componentDidMount而不是componentWillMount因為它將在版本17中棄用。