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

Question

在输入字段中键入数字后，计数状态 应反映输入值，当我单击 +或-,计数状态应该是加减.

现在输入的输入值显示在 DOM 上，但它没有改变 count 状态 ，并且当我点击 + 时，它没有按我想要的那样工作。

操作如下：

    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

问题

从你的所有片段中我几乎可以看出一切看起来都不错。唯一让我怀疑的一点是从数字输入中消耗的值，它将是 string 类型。我将您的代码复制到代码箱中以证实我的怀疑。

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

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

输入可以改变状态，但它改变了类型，因此递增停止工作。换句话说，string + number -> string via concatenation, string - number -> number via type coercion.

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

解决方案

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

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

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

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

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

The input field lets you set the count to whatever number you type in using Redux

reactjs

input

redux

react-redux

reducers

问题

解决方案