Javascript 使用redux输入的递增和递减计数器

我想通过输入值增加和减少计数器.counter1和计数器.counter2.innerCount。 这是我现在发现的错误

我在破坏物体等方面很弱，现在正在学习。
能给我一些建议或代码吗？特别适用于内计数的增量和减量。非常感谢

actionCreators.js

import * as actionTypes from "../actionTypes";

export const incrementCounter1 = () => {
  return {
    type: ActionTypes.INCREMENT_COUNTER_1,
  };
};

export const decrementCounter1 = () => {
  return {
    type: ActionTypes.DECREMENT_COUNTER_1,
  };
};

export const incrementByAmount = (amount) => {
  return {
    type: ActionTypes.INCREMENT_BY_AMOUNT,
    amount:amount,
  };
};

reducer.js

import * as actionTypes from "../actionTypes";

const INITIAL_STATE = {
  counter: {
    counter1: 0,
    counter2: {
      innerCount: 0,
    },
  },
};

export const Auth = (state = INITIAL_STATE, action) => {
  const { type, payload } = action;
  let a;
  switch (type) {
    case ActionTypes.INCREMENT_COUNTER_1:
      a = {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 +=1,
        },
      };
      return a;
    case ActionTypes.DECREMENT_COUNTER_1:
      a = {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 -=1,
        },
      };
      return a;
    case ActionTypes.INCREMENT_BY_AMOUNT:
      a = {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 +=payload,
        },
      };
      return a;
    default:
      return state;
  }
};

export default Auth;

mainPage.js

import React, { useState } from "react";
import { View, Text, StyleSheet, Button, TextInput } from "react-native";
import {
  incrementCounter1,
  decrementCounter1,
  incrementByAmount,
} from "./states/redux/ActionCreators/auth";
import { connect } from "react-redux";


const Counter = ({
  counterRedux,
  incrementCounter1,
  decrementCounter1,
  incrementByAmount,
}) => {
  const [amount, setAmount] = useState('');

  return (
    <View>
      <Text style={styles.text}>Input text for changing</Text>

      <Button title="INCREMENT" onPress={() => incrementCounter1()} />
      <Button title="DECREMENT" onPress={() => decrementCounter1()} />

      <View>
        <Text style={styles.Atext}>Enter amount to increase:</Text>
        <TextInput style={styles.input} value={amount} onChangeText={(a) => setAmount(a)} />
        <Text style={styles.Atext}>Amount: {amount}</Text>
        <Button title='Add Amount' onPress={(amount)=>incrementByAmount(amount)}></Button>
      </View>

      <View>
        <Text style={styles.Atext}>First Counter: {counterRedux.counter1}</Text>
      </View>
    </View>
  );
};

const mapStateToProps = (state) => {
  return {
    counterRedux: state.counter,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCounter1: () => dispatch(incrementCounter1()),
    decrementCounter1: () => dispatch(decrementCounter1()),
    incrementByAmount: (amount) => dispatch(incrementByAmount(amount)),
  };
};


const styles = StyleSheet.create({
  text: {
    fontSize: 25,
  },
  Atext: {
    fontSize: 20,
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
  },
  button: {
    backgroundColor: "#fff",
    fontSize: 15,
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

---

您的第一个问题是：

incrementByAmount（amount）}>

您要做的是将onPress传递的参数传递给

incrementByAmount

，它根本不是您期望的

amount

，而是一个

PressEvent

对象。
为了接收您期望的

金额

，您需要执行以下操作：

incrementByAmount（amount）}>

以便从

useState

获取

金额

另外，您肯定不需要为计数器执行三个操作，一个更简单的方法是使用一个
updateAmount
函数，您可以将一个
类型的
作为有效负载传递给它，该类型将是“递增”或“递减”，以及一个
数量

一个更简单的方法是只拥有一个数量，并将负值或正值传递给它。

对于递增和递减按钮，只需将1或-1作为
金额传递即可

第二个问题是，您正在使用
+=
和
-=
运算符改变减速器中的状态。

这是您的固定减速机（我将让您实现我之前建议的更改）：

import*作为“./actionTypes”中的actionTypes；
常量初始状态={
柜台：{
1比0,，
计数器2：{
内部计数：0，
},
},
};
导出常量Auth=（状态=初始状态，操作）=>{
const{type，payload}=action；
开关（类型）{
案例操作类型。增量\u计数器\u 1：
返回{
……国家，
柜台：{
…state.counter，
counter1:state.counter.counter1+1，
},
};
案例操作类型.减量\u计数器\u 1：
返回{
……国家，
柜台：{
…state.counter，
counter1:state.counter.counter1-1，
},
};
案例操作类型。按金额递增：
返回{
……国家，
柜台：{
…state.counter，
计数器1：state.counter.counter1+有效负载，
},
};
违约：
返回状态；
}
};
导出默认身份验证；

我删除了不需要的
a
变量，并将
+=
运算符更改为
+
，将
-=
运算符更改为
-
，这样您的状态就不会发生变化

您的第三个问题是，您正在分解变量
有效负载
，而该变量在您的action creator中被称为
金额
。

另外，不要忘记您从
获得的是
字符串，而不是
数字

最后，您将操作类型导入为
actionTypes
，但将它们用作
actionTypes
您的第一个问题是：
incrementByAmount（amount）}>


您要做的是将onPress传递的参数传递给
incrementByAmount
，它根本不是您期望的
amount
，而是一个
PressEvent
对象。

为了接收您期望的
金额
，您需要执行以下操作：
incrementByAmount（amount）}>
以便从
useState
获取
金额

另外，您肯定不需要为计数器执行三个操作，一个更简单的方法是使用一个
updateAmount
函数，您可以将一个
类型的
作为有效负载传递给它，该类型将是“递增”或“递减”，以及一个
数量

一个更简单的方法是只拥有一个数量，并将负值或正值传递给它。

对于递增和递减按钮，只需将1或-1作为
金额传递即可

第二个问题是，您正在使用
+=
和
-=
运算符改变减速器中的状态。

这是您的固定减速机（我将让您实现我之前建议的更改）：

import*作为“./actionTypes”中的actionTypes；
常量初始状态={
柜台：{
1比0,，
计数器2：{
内部计数：0，
},
},
};
导出常量Auth=（状态=初始状态，操作）=>{
const{type，payload}=action；
开关（类型）{
案例操作类型。增量\u计数器\u 1：
返回{
……国家，
柜台：{
…state.counter，
counter1:state.counter.counter1+1，
},
};
案例操作类型.减量\u计数器\u 1：
返回{
……国家，
柜台：{
…state.counter，
counter1:state.counter.counter1-1，
},
};
案例操作类型。按金额递增：
返回{
……国家，
柜台：{
…state.counter，
计数器1：state.counter.counter1+有效负载，
},
};
违约：
返回状态；
}
};
导出默认身份验证；

我删除了不需要的
a
变量，并将
+=
运算符更改为
+
，将
-=
运算符更改为
-
，这样您的状态就不会发生变化

您的第三个问题是，您正在分解变量
有效负载
，而该变量在您的action creator中被称为
金额
。

另外，不要忘记您从
获得的是
字符串，而不是
数字

最后，您将操作类型导入为
actionTypes
，但将它们用作
actionTypes
更改按钮问题后，我仍然收到错误“NaN”。我现在正在学习输入值如何作为有效负载传递
export const INCREMENT_BY_AMOUNT = 'INCREMENT_BY_AMOUNT';
export const INCREMENT_COUNTER_1 = 'INCREMENT_COUNTER_1';
export const DECREMENT_COUNTER_1 = 'DECREMENT_COUNTER_1';