在调用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);