useReducer action.data notiterableエラーの解決
8218 ワード
ケース
dispatchを使用してdispatchのデータをreduceに送信する場合const reducer = (state,action) => {
let newState = [];
switch(action.type){
case 'CREATE':{
newState = [...action.data, ...state]; //
break; // break걸지 않으면 자동으로 default가 실행된다.
}
default:
return state;
}
return newState;
};
const onCreate = (author, content, picture) => {
dispatch({type : "CREATE",
data: {
id: dataId.current,
author,
content,
picture,
}})
dataId.current += 1;
};
const reducer = (state,action) => {
let newState = [];
switch(action.type){
case 'CREATE':{
newState = [...action.data, ...state]; //
break; // break걸지 않으면 자동으로 default가 실행된다.
}
default:
return state;
}
return newState;
};
const onCreate = (author, content, picture) => {
dispatch({type : "CREATE",
data: {
id: dataId.current,
author,
content,
picture,
}})
dataId.current += 1;
};
action.データはtypeとともに伝達されるデータは伝達されない.
const [data,dispatch] = useReducer(reducer,dummyData);
そこで、reduceで設定したデータがどのようなフォーマットで存在するかを確認しました.はい、オブジェクトの形で並べられています!!!
const onCreate = (author, content, picture) => {
dispatch({type : "CREATE",
data: {
id: dataId.current,
author,
content,
picture,
}})
dataId.current += 1;
};
action.データは既にオブジェクトです.そしてnewStateに撒きます.そのためエラーが発生しました.
const reducer = (state,action) => {
let newState = [];
switch(action.type){
case 'CREATE':{
newState = [action.data, ...state]; //
break; // break걸지 않으면 자동으로 default가 실행된다.
}
default:
return state;
}
return newState;
};
以上action.dataでspread演算子を使用しないと、うまく動作します.주의
action.dataの横のstateは以下の通りです.配列別に並べられているので、新しいデータとマージするにはspreadを使用する必要があります.
Reference
この問題について(useReducer action.data notiterableエラーの解決), 我々は、より多くの情報をここで見つけました https://velog.io/@minho100227/useReducer-action.data-not-iterable-오류-해결テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol