Next props 返回未定义的 React + Redux答案

【问题标题】：Next props returns undefined React + ReduxNext props 返回未定义的 React + Redux
【发布时间】：2019-02-27 08:18:40
【问题描述】：

我在这里所做的只是创建一个组件，该组件有一个按钮来更改商店中的状态，所以我创建了 mapDispatchToProps，它在按钮 onClick 事件处理程序中调度操作

export class ProductCard extends Component{
  render(){
    return(
      <div className="ImageCard" style={{backgroundImage:"url("+this.props.image+")"}}>
        <div className= "product-details">{this.props.details}</div>
        <button
          className="TheButton btn btn-dark"
          onClick = {(e)=>{
            console.log(this.props);
            this.props.updateData(1)}}>Click Here</button>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  updateData: (data) => dispatch(changeState(data))
});

componentWillReceiveProps ({data}) {
  console.log("next props",data)
}

const mapStateToProps = (state) => ({
  data:state.data,
  title:state.title
});

export default connect(mapStateToProps,mapDispatchToProps)(ProductCard);

这是商店的代码

const initstate={
  data:0,
  title:'rr'
}
const store = createStore((state=initstate , action)=>{
  if (typeof state === 'undefined') {
    console.log("lo");
    return 0;
  }
  switch(action.type){
    case types.CHANGESTATE:{
      console.log(state)
      return state.data + action.data;
    }
    default:
      return state;
  }
});

当我记录下一个道具时，我得到 data 和 title 未定义，你能告诉我这里缺少什么吗？

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

在你的 reducer 中，你总是必须返回一个新对象来代表你的新状态。在您的 CHANGESTATE 操作中，您没有返回一个对象，您只是返回一个数字 (state.data + action.data)。尝试返回这个对象：

{ ...state, data: state.data + action.data }

所以你的完整 case 看起来像：

case types.CHANGESTATE: {
  console.log(state)
  return {
    ...state,
    data: state.data + action.data
  };
}

【讨论】：