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值更改，然后更新/更改您的值

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

这是沙盒链接https://codesandbox.io/s/compassionate-mestorf-r0qyt

Answer 2

我的代码是：- 动作

unset($sql);

    if ($stationFilter) {
        $sql[] = " STATION_NETWORK = '$stationFilter' ";
    }
    if ($verticalFilter) {
        $sql[] = " VERTICAL = '$verticalFilter' ";
    }

    $query = "SELECT * FROM $tableName";

    if (!empty($sql)) {
        $query .= ' WHERE ' . implode(' AND ', $sql);
    }

    echo $query;

减速器

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

Root Reducer

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

递增和递减无法正常工作

2 个答案: