bugfix> javascript > 投稿

componentWillMountでAJAX呼び出しを行い、reduxストアへの応答で受信したデータをバックアップする反応コンポーネントがあります。ここにコードがあります

componentWillMount() {
  var self = this;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      console.log(this.responseText);
      var json = JSON.parse(this.responseText);
      var data = {
        json
      };
      self.props.dispatch({
        type: "ADD_Exams",
        data
      });
    }
  };
  xmlhttp.open("GET", "http://127.0.0.1:8000/getExams/", true);
  xmlhttp.send();
}

レデューサーでは、アクションで受信したデータをレデューサー状態で定義された配列に割り当てています。

const initialState = {
  exams:[]    
}
const examreducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_Exams":
      return {
        ...state,
        exams: [...state.exams, action.data.json]
      };
    default:
      return state;
  }
};

しかし、mapStateToPropsを使用して試験変数を読み取ると、未定義になります。

const mapStateToProps = (state) => {
    return {
        exams: state.exams
    }
}
export default connect(mapStateToProps)(Exam);

私はこのような店を作っています

import { Provider } from "react-redux";
const store = createStore(loginReducer, examReducer);
ReactDOM.render(
  <Provider store={store}>
    <Exam />
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

console.log(this.props.exams)は未定義を出力します。ここで問題は何ですか?

回答 2 件
  • データの取得方法やストアの初期化方法に問題があると思います。これを試して:

    import { createStore, combineReducers } from 'redux'
    import loginReducer from '../path';
    import examReducer from '../path';
    const rootStore = combineReducers({
      loginReducer,
      examReducer
    })
    const store = createStore(rootReducer);
    ReactDOM.render(
      <Provider store={store}>
        <Exam />
      </Provider>,
      document.getElementById("root")
    );
    
    

    その後:

    const mapStateToProps = (state) => {
        return {
            exams: state.examReducer.exams
        }
    }
    
    

  • あなたの mapStateToProps を編集できますか  あなたの州の実際の内容を見るためにこのように?

    const mapStateToProps = (state) => {
       console.log(state);
        return {
            exams: state.exams
        }
    }
    
    

    減速機が減速機のルートにないのではないかと思います。もしそうなら、あなたは state.examreducer.exams をする必要があるかもしれません 。 また、コンポーネントは Provider でラップされていますか ?コンテキストにアクセスするために必要です(それを通じて状態にアクセスできます)。

    更新

    Reactコンポーネントをレンダリングする前に、必ずストアを初期化してください。

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { createStore, combineReducers } from 'redux';
    import { Provider } from 'react-redux';
    const store = createStore(combineReducers({loginReducer, examReducer}), {loginReducer:{}, examReducer:{}});
    ReactDOM.render(
      <Provider store={store}>
        <Exam />
      </Provider>,
      document.getElementById('root')
    )
    
    

    次に、 mapStateToProps を更新します :

    const mapStateToProps = (state) => {
        return {
            exams: state.examReducer.exams || []
        }
    }
    
    

あなたの答え