Javascript 增量和减量不能正常工作

我正在尝试创建数量字段，用户可以在其中增加和减少数量。我正在用redux表单绑定此字段。有一个问题，如果我继续增加，它会增加数字，但当增加数字后，如果我尝试减少数字，它会先增加，然后在第二次减少时，它会开始减少数字。当减少时，如果数字达到1，那么如果我尝试增加数字，它将显示0，然后以预期的方式开始工作

这里是演示以及

这是源代码

const QuantityField = ({ input, label, meta, inputCss, labelCss, ...rest }) => {
  const [quantity, setQuantity] = React.useState(1);

  const handleIncrease = () => {
    setQuantity(quantity + 1);
    console.log("###################");
    rest.change(input.name, quantity);
    console.log("###################");
    console.log("input value", input.value);
  };

  const handleDecrease = () => {
    if (quantity > 0) {
      setQuantity(quantity - 1);
      rest.change(input.name, quantity);
    }
  };

  return (
    <>
      <InputWrapper>
        {label && (
          <Label isActive={meta !== undefined && meta.active} css={labelCss}>
            {label}
          </Label>
        )}
        <TextInputWapper>
          <Augment onClick={() => handleIncrease()}>
            <FontAwesomeIcon icon={faPlus} style={{ color: "#fff" }} />
          </Augment>
          <TextInput
            css={inputCss}
            disabled
            isActive={meta !== undefined && meta.active}
            hasError={meta !== undefined && meta.touched && !!meta.error}
            {...input}
            {...rest}
          />
          <Augment onClick={() => handleDecrease()}>
            <FontAwesomeIcon icon={faMinus} style={{ color: "#fff" }} />
          </Augment>
        </TextInputWapper>
        {meta !== undefined && meta.touched && !!meta.error && (
          <Error className="field-error">{meta.error}</Error>
        )}
      </InputWrapper>
    </>
  );
};

export default QuantityField;

const Augment = styled.span`
  background: #1ab394;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
`;

---

这里的问题是，您正在更改setQuantity之后的值，而setQuantity是异步的，因此您的下一条语句将不会有更新的值，您需要使用useEffect通知您quantity值的更改，然后更新/更改您的值

  const QuantityField = ({ input, label, meta, inputCss, labelCss, ...rest }) => {
  const [quantity, setQuantity] = React.useState(0);

  const handleIncrease = () => {
    setQuantity(quantity + 1);
    console.log("###################");
    // rest.change(input.name, quantity);
    console.log("###################");
    console.log("input value", input.value);
  };

  const handleDecrease = () => {
    if (quantity > 0) {
      setQuantity(quantity - 1);
      console.log("sss", quantity);
    }
  };

  React.useEffect(() => {          
      rest.change(input.name, parseInt(quantity,10));
  }, [quantity]);

这是沙盒链接

我的代码是：- 行动

减速器

根部减压器

组成部分

---

可能是因为在您的QuantityField组件中，显示的值是输入，而不是状态，即quantity。我如何使用redux表单状态调整此值？使用此输入的位置？抱歉，我不理解您的意思。在QuantityField组件中，如果您在返回之前更改输入。value=数量，它将解决您的问题。但是改变道具的价值是一个很大的问题。

import { MINUS_NUMBER, PLUS_NUMBER, RESET_NUMBER } from "./types";
export const minusAction = number => dispatch => {
  dispatch({
    type: MINUS_NUMBER,
    payload: number
  });
};
export const plusAction = number => dispatch => {
  dispatch({
    type: PLUS_NUMBER,
    payload: number
  });
};
export const resetAction = number => dispatch => {
  dispatch({
    type: RESET_NUMBER,
    payload: number
  });
};

const addNumber = (state = initialState, action) => {
  switch (action.type) {
    case MINUS_NUMBER:
      return {
        ...state,
        number: action.payload - 1
      };
    case PLUS_NUMBER:
      return {
        ...state,
        number: action.payload + 1
      };
    case RESET_NUMBER:
      return {
        ...state,
        number: 0
      };
    default:
      return state;
  }
};
export default addNumber;

import { combineReducers } from "redux";
import clickerReducer from "./clickerReducer";
export default combineReducers({
  clickerReducer
});

import React from "react";
import { connect } from "react-redux";
import { minusAction, plusAction, resetAction } from "../actions/clickerAction";
function App(props) {
  return (
    <div align="center" className="App">
      <h1>{props.number}</h1>
      <button
        onClick={() => {
          props.minusAction(props.number);
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          props.resetAction(props.number);
        }}
      >
        Reset
      </button>
      <button
        onClick={() => {
          props.plusAction(props.number);
        }}
      >
        +
      </button>
    </div>
  );
}
const mapStateToProps = state => ({
  number: state.clickerReducer.number
});
export default connect(mapStateToProps, {
  minusAction,
  plusAction,
  resetAction
})(App);