代码之家 › 专栏 › 技术社区 › catandmouse

如何在API更新后更改存储状态?

react-redux redux reactjs javascript

catandmouse · 技术社区 · 6 年前

假设我有一个POST请求,它将对象中属性的状态更新为true/false。

case "ADD_CHANGE_TO_TRUE_RESOLVE":
    if (action.res.errorCode == 0) {
        console.log("NO ERROR!");
        // DO SOMETHING
   }

当前,状态可以在后端更改,但除非刷新页面,否则“true”状态不会反映在DOM中(我正在对componentDidMount()执行GET请求,以便在页面刷新时获取最新数据)。

我的问题是如何在post请求之后立即更改存储中的状态(post请求是通过单击按钮触发的)?

我要这样做吗?

case "ADD_CHANGE_TO_TRUE_RESOLVE":
    if (action.res.errorCode == 0) {
        console.log("NO ERROR!");
        const objChanged = newState.list.find(function (obj) { return obj.id === action.res.data.id; });
        objChanged.is_favorite = true;

考虑到我在店里的状态是这样的:

const currentState = [
    {
        list: []
    }
];

我对redux/react非常陌生,所以不确定是否做得很好。

3 回复 | 直到 6 年前

Shubham Khatri 6 年前

你不应该直接改变状态值。另外,在成功的API请求之后分派操作时,您可以只传递id作为请求的有效负载

dispatch({
   type: 'ADD_CHANGE_TO_TRUE_RESOLVE',
   id: res.data.id
})

case "ADD_CHANGE_TO_TRUE_RESOLVE": {

    const objIndex = state.list.findIndex(function (obj) { return obj.id === action.id; });
    if(objIndex > -1) {
         // return the updated state if the id was found
         return {
              ...state,
              list: [
                  ...state.list.slice(0, index), 
                  {...state.list[objIndex], is_favorite: true},
                  ...state.list.slice(index + 1)
              ]
         }
    }
    // otherwise return the state as it is
    return state
}

sachin kaushik 6 年前

可以将状态存储为

this.setState({[stateName]:value});

在使用ajax或axios的情况下,必须首先绑定函数

此.apicallfunction= this.apicallfunction.bind(本条);

Pouya Jabbarisani 6 年前

import update from 'react-addons-update'

case "ADD_CHANGE_TO_TRUE_RESOLVE": {
         if(action.id > -1){
              return update(state, {
                    list: {
                        [action.id]: {
                            is_favorite: { $set: true }
                        }
                    }
                })
          }
          else{
               return state
          }
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前