Question

我在这里所做的只是创建一个组件，该组件具有用于更改商店状态的按钮，因此我创建了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不确定，你能告诉我我在这里缺少什么吗？

Answer 1

在化简器中，您总是必须返回一个新对象，该对象将代表您的新状态。在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
  };
}

下一个道具返回未定义的React + Redux

1 个答案: