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

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

  •  0
  • 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 年前
        1
  •  1
  •   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
    }
    
        2
  •  0
  •   sachin kaushik    6 年前

    可以将状态存储为

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

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

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

        3
  •  0
  •   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
              }
    }