Redux状态更新后,React不重新渲染

时间:2018-11-26 10:20:21

标签: reactjs redux

在调用addAmount之后,我的inputValue值被重置为0。我可以看到商店正在通过redux工具更新为0,但是我的输入值没有重置为0。我知道对react / redux状态进行更改是一个常见问题,但我无法解决。

由于发布限制,我已删除了代码。

减速器

case actions.RESET_INPUT_VALUE:
          return {
            ...state,
            inputValue: action.payload
          };
        default:
          return state;
      }};

操作

export const resetInputValue = value => ({
  type: actions.RESET_INPUT_VALUE,
  payload: value
});

反应组件

class TheBox extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };

    this.handleChange = this.handleChange.bind(this);
  }
  addAmount = e => {
    e.preventDefault();
    const addToTotal =
      this.props.state.dayIntakeAmount + this.props.state.inputValue;
    this.props.onAddAmount(addToTotal, this.props.state.date);
    this.props.onResetInputValue(0);
    console.log(this.props.state.inputValue);
  };

  handleChange = e => {
    this.props.onInputChange(e.target.value);
  };


              <form onSubmit={this.addAmount}>
                <Input
                  type="number"
                  required
                  name="inputValue"
                  value={this.props.state.inputValue}
                  onChange={this.handleChange}
                  suffix="ml"
                />

                <Button
                  success
                  type="submit"
                  disabled={this.props.state.inputValue <= 0}
                >
                  ADD
                </Button>
              </form>


const mapStateToProps = state => ({
  state
});

const mapDispatchToProps = dispatch => ({
  onAddAmount: (amount, date) => dispatch(plusIntakeAmount(amount, date)),
  onInputChange: value => dispatch(onInputChange(value)),
  onResetInputValue: value => dispatch(resetInputValue(value))
});

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

0 个答案:

没有答案