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 件
あなたの
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 || [] } }
関連した質問
- React:アクションはプレーンオブジェクトでなければなりません
- TypeError:react-reduxで未定義のプロパティ 'map'を読み取れません
- Reduxで未定義のプロパティ「タイプ」を読み取れません
- redux-toolkitのcreateSliceメソッドを使用して、さまざまなレデューサー関数で単一アクションタイプを使用する方法
- ReduxからのReact状態の更新により、最大更新深度がエラーを超えました
- React-Redux:ネストされた配列を別の配列に割り当てるアクションをディスパッチしようとしているときに無効なフック呼び出し
- javascriptプロパティが挿入されたURLをフェッチしますが、UTF-8文字がコンソールに表示され続け、404が発生します
- NextJsはサーバー側のレンダリングを介してFacebookタグをレンダリングします
- React Nativeエラー失敗したプロップタイプ:タイプ `array`の無効なプロップ` children`が `Overlay`に提供されました。
- svg要素の幅と高さを制御する方法
データの取得方法やストアの初期化方法に問題があると思います。これを試して:
その後: