javascript - 还原,反应。我无法推送到已经有数据的状态数组
问题描述
我无法推送到 fetchedSpendings 状态数组,该数组在获取后已经有数据。
减速器.js
import {FETCH_SPENDINGS, PUSH_SPENDING } from './types'
const initialState = {
fetchedSpendings: []
}
export const dataReducer = (state = initialState, action) => {
switch(action.type){
case PUSH_SPENDING:
return {...state, fetchedSpendings: state.fetchedSpendings.push(action.payload)}
//return {...state, fetchedSpendings: state.fetchedSpendings = [action.payload]}
case FETCH_SPENDINGS:
return { ...state, fetchedSpendings: action.payload }
default: return state
}
}
如果 PUSH_SPENDING 正在工作,但它不会将数据添加到已经包含对象的数组中,而是替换它们,则注释掉行。
//return {...state, fetchedSpendings: state.fetchedSpendings = [action.payload]}
在这种情况下,另一个没有。
return {...state, fetchedSpendings: state.fetchedSpendings.push(action.payload)}
动作.js
export function fetchSpendings(){
return async dispatch => {
const userid = userDataGetter();
try{
const response = await axios.post('/api/getSpendings', { userID: userid})
const json = await response["data"];
dispatch( {type: FETCH_SPENDINGS, payload: json})
console.log('Returned data:', json);
} catch (e) {
console.log(`Axios request failed in fetchSpendings: ${e}`);
}
}
}
export function pushSpending(cost, category, note){
return async dispatch => {
const userData = userDataGetter();
const userID = userData.userId;
const dataSpend = {
_id: userID,
date: String(new Date()),
cost: cost,
category: category,
note: note
}
try{
const response = await axios.post('/api/addSpending', {cost, category, note, userID})
const json = await response;
dispatch( {type: PUSH_SPENDING, payload: dataSpend})
} catch(e){
console.log(`Axios request failed in pushSpendings: ${e}`);
M.toast({html: "incorrectly entered data"});
}
}
}
在反应我得到错误。props.Spending.map 不是函数。
因为这条线不会将数据推送到数组中。
return {...state, fetchedSpendings: state.fetchedSpendings.push(action.payload)}
解决方案
使用扩展运算符创建一个新数组,action.payload
并将其作为其最终元素:
return {
...state,
fetchedSpendings: [...state.fetchedSpendings, action.payload],
}
.push
修改数组并返回添加的元素,因此fetchedSpendings
在使用时不再是数组.push
。此外,React 需要查看要更新的新数组。
推荐阅读
- javascript - 我将如何修复嵌入命令中的意外标记/添加
特征? - javascript - 如何在打字稿函数中对参数中的对象进行类型检查
- javascript - Rails 渲染部分似乎使#element 不再响应 $('#element').click(function()
- python - 如何通过不更改 URL 的“显示更多”按钮获取数据?
- terminal - 将 Firebase 身份验证数据作为 CSV 保存到我的笔记本电脑时出错
- node.js - 如何在每个响应 node.js 上将变量的先前值与新变量值进行比较
- javascript - 将 CSS 样式应用于画布的一部分
- flutter - 带有详细信息的消息聊天气泡
- game-maker - 我目前可以在 Steam 上购买永久游戏制作工作室 2 移动开发许可证,然后将其转移到我的 yoyogames 帐户吗?
- html - 如何添加类
- WordPress中的标签?