Question

我有一个带有复选框的列表（Material-UI）

，我想要的值（topping（最多三个浇头的数组），toppingPrice（每个添加的浇头的价格为0.50）到我的组件状态然后调度我的操作（ADD_TOPPING）并查看我的redux状态中的更新值（topping，toppingPrice）

我正在导入操作创建者

library(data.table)

df$time <- as.POSIXct(df$time, format = "%Y-%m-%d %H:%M:%S")

setDT(df)
df[,timeLow := time-5*60*60]

df[df,.(time, p, h = i.h), on=.(time < time, time >= timeLow)][
  ,.(factor_rain = ifelse(!is.na(first(h)), any(!is.na(p)),FALSE)),by=.(time)][
    df,.(time, p, h, factor_rain),on="time"]

#                   time    p  h factor_rain
# 1: 2017-06-04 09:00:00   NA 23       FALSE
# 2: 2017-06-04 13:00:00   NA NA       FALSE
# 3: 2017-06-04 17:00:00 16.4 NA       FALSE
# 4: 2017-06-04 19:00:00   NA NA       FALSE
# 5: 2017-06-04 21:00:00   NA NA       FALSE
# 6: 2017-06-04 23:00:00   NA 32       FALSE   <-- There is no rain in last 5 hours
# 7: 2017-06-05 09:00:00   NA NA       FALSE
# 8: 2017-06-05 11:00:00   NA NA       FALSE
# 9: 2017-06-05 13:00:00   NA 28       FALSE
# 10: 2017-06-05 16:00:00   NA NA       FALSE
# 11: 2017-06-05 19:00:00 12.0 NA       FALSE
# 12: 2017-06-05 21:00:00   NA 33        TRUE
# 13: 2017-06-05 23:00:00   NA NA       FALSE
# 14: 2017-06-06 09:00:00   NA NA       FALSE
# 15: 2017-06-06 11:00:00   NA NA       FALSE
# 16: 2017-06-06 13:00:00   NA 29       FALSE
# 17: 2017-06-06 16:00:00   NA NA       FALSE
# 18: 2017-06-06 17:00:00   NA NA       FALSE
# 19: 2017-06-06 18:00:00   NA NA       FALSE
# 20: 2017-06-06 19:00:00   NA NA       FALSE

进入我的组件

export const ADD_TOPPING = 'ADD_TOPPING'
    export function addTopping(pizza) {
      return {
        type: ADD_TOPPING,
        payload: pizza
      }
    }

并将其连接到我的减速器

class CheckboxList extends React.Component {


  state = {
    topping:[],
    toppingPrice:0,
    checked: [0],

  };

  shouldDisableCheckbox = value => {
     const maxAllowed = 4
     const { checked } = this.state
     return checked.length >= maxAllowed && checked.lastIndexOf(value) === -1
  }


  handleToggle = value => () => {
    const { checked } = this.state;
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];
    this.setState({
      topping: value[0],
      toppingPrice: parseFloat(value[1]),

     });
    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    this.setState({
      checked: newChecked,
    });
  };

  render() {
    const { classes } = this.props;
    const toppings = ['Chicken', 'Pineapple', 'Corn', 'Olives (green)', 'Red union', 'Spinach', 'Cherry tomatoes']
      console.log(this.state)
    return (
      <div className={classes.root}>
        <h3>Additional Toppings <br/><small>(€ 0.50 Per Topping)</small></h3>
        <List>
          {toppings.map(value => (
            <ListItem
              key={value}
              role={undefined}
              dense
              button
              onClick={this.handleToggle(value)}
              className={classes.listItem}
              disabled={this.shouldDisableCheckbox(value)
              }

            >
              <Checkbox
                checked={this.state.checked.indexOf(value) !== -1}
                tabIndex={-1}
                disableRipple

              />
              <ListItemText primary={`NewAge ${value}`} />

            </ListItem>
          ))}
        </List>
      </div>
    );
  }
}

CheckboxList.propTypes = {
  classes: PropTypes.object.isRequired,
};
const mapStateToProps = function(state) {
  return {pizza: state.pizza}
}
const Connect = connect(mapStateToProps, {addTopping})(CheckboxList)


export default withStyles(styles)(Connect);

我有非常相似的代码可比较的组件确实会在本地更新状态并显示为redux状态等。

我希望它以我的redux状态更新数组，并为每个选中的浇头添加0.50

但是三个小时后我的脑袋受伤了我似乎无法弄清楚。我该怎么办？

Answer 1

我不确定为什么要传递单个对象，而不是对connect函数使用mapDispatchToProps。

const mapDispatchToProps = () => {
  return {
    onToppingAdded: (topping) => actions.addTopping(topping),
  }
}

然后使您的导出成为：

const Connect = connect(mapStateToProps, mapDispatchToProps)(CheckboxList)

您的减速器似乎也有问题。

  case ADD_TOPPING:

if(action.payload.topping){
  **return updateState.topping = action.payload.topping**
}
if(action.payload.toppingPrice){
return  updateState.toppingPrice = action.payload.toppingPrice
}else{
  return {...state}
}

由于有效载荷既有价格也有价格，但是您只在更新了第一部分之后就返回了。对其进行重构以一成不变地更新所有相关信息，然后立即返回所有更新状态。

我还建议您设置redux开发工具。您将能够看到正在发生的动作以及redux存储是什么。 See instructions here

作为一般说明-我建议您在redux中处理整个披萨，而不要像现在一样在react state和redux存储区之间进行分割。

使用Redux时，我唯一使用react状态的是本地UI状态。因此，可以将复选框保留在容器中，但是您可以将其他所有内容放入redux中。

我很确定您的问题现在完全在化简器中，但是如果您解决了该逻辑并且仍然遇到问题，请发布一个代码笔，我将进行仔细研究。

值未更新或未添加到Redux状态

1 个答案: