递增和递减不能正常工作

Question

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

这里还有演示

https://codesandbox.io/s/little-lake-q3rw9

这里是源代码

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;
`;

Answer 1

这里的问题是您正在 setQuantity 之后更改值，这是异步的，因此您的下一条语句将没有更新的值，您需要使用 useEffect 通知您 quantity 值发生变化，然后 update/change 您的值

  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]);

这里是沙盒linkhttps://codesandbox.io/s/compassionate-mestorf-r0qyt

Answer 2

我的密码是：- 操作数

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);

递增和递减不能正常工作

increment and decrement not working properly

javascript

reactjs

redux-form