繁体   English   中英

在reducer中更改状态后未更新组件

Component not being updated after state is changed in reducer

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想向用户显示错误。 动作将引发错误,并在化简器中更新错误和消息。 但是由于某种原因,我无法为用户显示错误或消息。 reducer或mapStateToProps有问题吗? 组件如何知道状态已更新? 我不确定如何更新。

我想念什么?

减速器:

import {CREATE_VEHICLE,VEHICLE_ERROR, 
VEHICLE_FORM_PAGE_SUBMIT,FETCH_VEHICLES_SUCCESS} from '../actions/vehicles';

const initialState={message: null, error: null, vehicle:{}};

 export default function vehicleReducer(state=initialState, action) {
console.log("in reducer");
switch(action.type){
case CREATE_VEHICLE:
    return [...state, Object.assign({}, action.vehicle, action.message)];
case VEHICLE_ERROR:
    return{
    ...state,
        error: action.error,
        message: action.message
    };
    default:
        return state;
}
}

动作:

export const vehicleError = (error, msg) => {
return{
type: VEHICLE_ERROR,
error:error,
message: msg
}

};

export const createVehicle=(vehicle) =>{
console.log("vehicle: ", vehicle);

return (dispatch) => {
    return axios.post(`http://localhost:9081/api/bmwvehicle/create`, 
vehicle)

    .then((response) =>{
        if (response.ok){
            console.log("success");
             dispatch(createVehicleSuccess(response.data))

        }}, (error) => {
                if (error.response.status == 500){
                dispatch(vehicleError(error.message, "Could not add vehicle, 
please try again."));

            }

        }
    );
};};

零件:

class Vehicle extends React.Component{
 constructor(props){
        super(props);
      }


      submitVehicle(input){
        this.props.createVehicle(input);
        }

      render(){
          console.log("the error is: ",this.props.error);
            return(
                    <div>
                        <AddVehicle submitVehicle= 
{this.submitVehicle.bind(this)} /> 
                    </div>

                )
      }
}

      const mapStateToProps=(state, ownProps) => {
          return{
              vehicle: state.vehicle,
              message: state.message,
              items: state.items,
              vehicles: state.vehicles,
              error: state.error
          }
      };

      const mapDispatchToProps=(dispatch)=>{
          return {
              createVehicle: vehicle => 
dispatch(vehicleActions.createVehicle(vehicle))
          }
      };


export default connect(mapStateToProps, mapDispatchToProps)(Vehicle);
1 个回复

在您的CREATE_VEHICLE动作中,我想您是要用花括号将状态返回? {...state, Object.assign({}, action.vehicle, action.message)}

在您的mapStateToProps中,您尝试访问state.vehiclesstate.items ,但是在默认的初始状态const initialState={message: null, error: null, vehicle:{}} ,它不存在。

为了回答有关组件如何知道(redux)状态已被更新的问题,组件知道了这一信息,因为您将其包装在名为connect()的Redux HoC中,它将在映射的redux状态发生变化时通过更新通知组件。 在您的情况下,组件将在redux存储的state.vehicle,state.message,state.items,state.vehicles和state.error更改时进行更新。

1 Reducer中的状态更改后,组件未重新渲染

假设我有一个链接,当单击该链接时,会将一个随机数添加到状态对象中称为queue的数组中。 整个state.queue数组显示在我的页面上,并在我们单击链接时更新。 我当前有一个链接,该链接应该做类似的事情,但是在我的化简器更改状态(向数组中添加新项)后,我的页面没有(重新?)呈现我的组件,因 ...

2 reducer更新状态后状态未更新

我正在尝试从App.js获取数据以获取网络连接可用性。 我正在从App.js获取数据以进行操作和reducer,但是reducer并未更新组件的状态。 reducer中的控制台日志正在运行,但是我无法在myComponent的mapStateToProps中获取数据。 我的App.js文件 ...

5 在Reducer中更改状态后未调用mapStateToProps

我有一个简单的注册表格。 我拥有的文件是signup.js,authActions.js和signUpReducer.js。 当执行动作时,动作创建者将分派动作,而reduce会接收到动作对象,并且还会更新状态,但是组件prop并未按预期进行更新。 export defaul ...

6 reducer还原后状态未更新

我正在尝试在页面加载时更新DOM。 基本上它应该在渲染时显示用户数据。 但是当我通过记录器进行检查时却没有发生,我发现值未存储在我的this.props值中。 但动作已触发,减速器已完成任务。 所以我担心,为什么我的mapStatToProps没有更新? 这是我的容器文件 我的 ...

7 Reducer 不更新组件的状态

我一整天都在努力让它工作,但无法从文档或其他帖子中找到解决方案,所以希望有人能够帮助我。 我有一个从另一个组件dashboard.调用的组件transactions dashboard. 当transaction加载时,它会触发一个动作,然后触发减速器。 我确认减速器具有我正在寻找的有效负载,但由 ...

8 reducer更新状态后对象顺序更改

目前,我正在学习Redux,玩着不同的东西。 因此,我制作了一个简单的TODO应用程序,可以编辑每个TODO项目。 但是由于某种原因,UPDATE_TODO reducer将更新的TODO项放在列表的和中。 因此,该项目已成功更新,但跳到TODO列表的末尾,而不是停留在原始位置。 ...

9 更改状态后组件未更新

在我的应用程序内部,我有一个组件如下: 正如你可以看到我呈现FlatList并为每个项目,在阵列中,有一个Text内部的元件TouchableOpacity 。 当您单击每个项目时, this.setState({selected: index})会将selected state设置为该项目的索 ...

10 状态更改后组件未更新

我在这里已经读完了100个这些线程,而且似乎无法理解为什么我的组件没有更新。 我很确定这与不可变性有关,但我无法弄清楚。 正在进行呼叫,并且正在从服务器返回呼叫。 状态正在改变(基于我已安装的redux-Dev-Tools)。我确保在任何情况下都不会改变状态,但是症状似乎指向该方向。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM