输入字段允许您将计数设置为您使用 Redux 输入的任何数字

Question

在输入字段中输入数字后，计数状态应该反映输入值，当我点击+或-，计数状态应该是加减法。

现在输入的输入值显示在 DOM 上，但它并没有改变 计数状态，当我点击 + 时，它没有按我的意愿工作。

操作如下：

    export const incrementCount = () => {
  return { type: INCREMENT };
};

export const decrementCount = () => {
  return { type: DECREMENT };
};

export const resetCount = () => {
  return { type: RESET }
};

export const typeCount = (number) => {
  return { 
    type: TYPECOUNT,
    payload: number
   }
}

export const evenCount = () => {
  return {
    type: EVENCOUNT
  }
}

export const oddCount = () => {
  return { type: ODDCOUNT }
}

这里是减速器：

export default (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1
    case DECREMENT:
      return state - 1
    case RESET:
      return state = 0
    case TYPECOUNT:
      return state = action.payload
    case EVENCOUNT:
      return state + 1
    case ODDCOUNT:
      return state + 1
    default:
      return state;
  }
};

这是商店：

import count from "./count";

import { combineReducers } from "redux";

export default combineReducers({ count });

这是 Counter.js 从“反应”导入反应；

const Counter = ({ 
  value, 
  onIncrement, 
  onDecrement, 
  onReset, 
  onType,
  onEven,
  onOdd
}) => {

  return (
    <div>
    <p>value: {value}</p>
    <p>
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
      <button onClick={onReset}>Reset</button>
      <input onChange={onType} type="number" value={value} />
      <button onClick={onEven}>Even Count</button>
      <button onClick={onOdd}>Odd count</button>
    </p>
  </div>
)
} 

export default Counter;

这是 CounterContainer.js

import { useSelector, useDispatch } from "react-redux"
import Counter from "../components/Counter"
import { incrementCount, decrementCount, resetCount, typeCount, evenCount, oddCount } from "../actions/counterActions"

const CounterContainer = () => {
  const count = useSelector(state => state.count)
  const dispatch = useDispatch()

  const increment = () => {
    dispatch(incrementCount())
  }

  const decrement = () => {
    dispatch(decrementCount())
  }

  const reset = () => {
    dispatch(resetCount());
  }

  const type = ({ target }) => {
    dispatch(typeCount(target.value))
  }

  const even = () => {
    if(count % 2 === 0) {
      dispatch(evenCount())
    }
  }

  const odd = () => {
    if(count % 2 === 1) {
      dispatch(oddCount())
    }
  }

  return (
    <React.Fragment>
      <Counter 
        value={count} 
        onIncrement={increment} 
        onDecrement={decrement} 
        onReset={reset}
        onType={type}
        onEven={even}
        onOdd={odd}
      />
    </React.Fragment>
  )
}

export default CounterContainer

Answer 1

问题

从你所有的 sn-ps 中我可以看出，这一切看起来都不错。唯一让我怀疑的是数字输入中的值的消耗，它的类型为string。我将您的代码复制到代码沙箱中以确认我的怀疑。

1. +/- 按钮按预期工作
2. 重置作品
3. “偶数”按钮有效
4. “奇数”按钮仅适用于正数。负奇数的模数是-1，而不是在回调中测试的1。

console.log(-1 % 2); // -1
console.log(-3 % 2); // -1
console.log(-5 % 2); // -1

5. 输入用于更改状态，但它会改变类型，因此递增停止工作。换句话说，字符串 + 数字 -> 字符串通过连接，字符串 - 数字 -> 数字通过类型强制。

const value = "10";

const addition = value + 5; // expect 15, number
const subtraction = value - 5; // expect 5, number

console.log(addition, typeof addition); // 105, string
console.log(subtraction, typeof subtraction); // 5, number

解决方案

1. 修复type 回调以保持状态类型不变。

   const type = ({ target }) => {
     dispatch(typeCount(Number(target.value)));
   };
   

2. 在odd按钮回调中正确处理负数。

   const odd = () => {
     if (Math.abs(count % 2) === 1) {
       dispatch(oddCount());
     }
   };