Javascript Redux能够将字符设置为数组，但是删除操作似乎无法到达减缩器

我使用redux在用户键入或删除字符数组时更新该数组，以便当用户正确键入整个短语时，我可以设置一个成功标志

到目前为止，当键入字符时，redux类型SET_输入将触发并更新我的状态，但不幸的是，我的REMOVE_输入似乎没有触发，但它确实到达了操作

我的减速机： 从“./types”导入{GET_PHRASE，SET_LOADING，SET_INPUT，REMOVE_INPUT}

我的行动：

import { GET_PHRASE, SET_LOADING, SET_INPUT, REMOVE_INPUT } from "../types";
import axios from "axios";

export const getPhrase = (level) => async (dispatch) => {
    try {
        setLoading();

        await axios
            .get(`MY ROUTE`)
            .then((res) => {
                // console.log(res);
                const sentence = res.data.data.phrase;
                const scrambledSentence = scramblePhrase(
                    res.data.data.phrase
                );

                dispatch({
                    type: GET_PHRASE,
                    payload: {
                        phrase: phrase.toLowerCase(),
                        scrambledPhrase: scrambledPhrase.toLowerCase(),
                    },
                });
            });
    } catch (err) {
        console.error(err);
    }
};

// SET INPUT
export const setInput = (input) => async (dispatch) => {
    try {
        dispatch({
            type: SET_INPUT,
            payload: input,
        });
    } catch (err) {
        console.error(err);
    }
};

// REMOVE INPUT
export const removeInput = () => {
    try {
        console.log("remove reached in actions");
        return {
            type: REMOVE_INPUT,
        };
    } catch (err) {
        console.error(err);
    }
};

// SET LOADING
export const setLoading = () => {
    console.log("Loading...");
    return {
        type: SET_LOADING,
    };
};

“我的组件”以输入字符：

import React, { useState } from "react";

// redux imports
import { connect } from "react-redux";
import { setInput, removeInput } from "../redux/actions/phraseActions";
import PropTypes from "prop-types";

const Character = ({ character, hasSpace, setInput }) => {
    const [success, setSuccess] = useState();

    const handleChange = (e) => {
        if (e.target.value === character) {
            // console.log("Success");
            setSuccess(true);
        } else {
            setSuccess(false);
        }
    };

    const keyedDown = (e) => {
        // check for space or a letter
        if (e.keyCode === 32 || (e.keyCode > 64 && e.keyCode < 91)) {
            setInput(String.fromCharCode(e.keyCode).toLowerCase());
        }
        // check for backspace
        else if (e.keyCode === 8) {
            removeInput();
        }
    };
    return (
        <div
            className={`character ${
                success ? "success" : hasSpace ? "space" : ""
            }`}
        >
            <input
                type="text"
                name="name"
                required
                maxLength="1"
                size="1"
                onChange={handleChange}
                onKeyDown={keyedDown}
                className="input"
                autoComplete="off"
            ></input>
        </div>
    );
};

Character.propTypes = {
    setInput: PropTypes.func.isRequired,
    removeInput: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
    // define state
    phrase: state.phrase,
});

export default connect(mapStateToProps, { setInput, removeInput })(Character);

import React，{useState}来自“React”；
//redux导入
从“react redux”导入{connect}；
从“./redux/actions/phraseActions”导入{setInput，removeInput}”；
从“道具类型”导入道具类型；
常量字符=（{Character，hasSpace，setInput}）=>{
const[success，setSuccess]=useState（）；
常数handleChange=（e）=>{
if（e.target.value==字符）{
//控制台日志（“成功”）；
设置成功（true）；
}否则{
设置成功（假）；
}
};
常数keyedDown=（e）=>{
//检查空格或字母
如果（e.keyCode==32 | |（e.keyCode>64&&e.keyCode<91））{
setInput（String.fromCharCode（e.keyCode.toLowerCase（））；
}
//检查退格
否则如果（例如，keyCode===8）{
移除输入（）；
}
};
返回(
);
};
Character.propTypes={
setInput:PropTypes.func.isRequired，
removeInput:PropTypes.func.isRequired，
};
常量mapStateToProps=（状态）=>({
//定义状态
短语：state.短语，
});
导出默认连接（MapStateTops，{setInput，removeInput}）（字符）；

在我的控制台中，您可以看到我达到了哪些点：

---

在事件处理程序中，您不是调用connect（props.removeInput）提供的

removeInput

，而是调用导入的removeInput，它不分派任何内容，只返回一个操作对象，因此我建议将组件定义更改为：

const Character = ({ character, hasSpace, setInput, removeInput }) => {

---

在reducer中，您可以执行以下操作：

input:state.input.slice（0，-1），

，因为已返回数组的浅层副本，因此无需使用

[…]

在事件处理程序中，您没有调用connect（props.removeInput）提供的

removeInput

但是导入的removeInput不分派任何内容，只返回一个action对象，因此我建议将组件定义更改为：

const Character = ({ character, hasSpace, setInput, removeInput }) => {

---

在您的reducer中，您可以执行以下操作：

input:state.input.slice（0，-1），

，因为已返回数组的浅层副本，因此无需使用

[…]复制它。
啊，天哪，我瞎了！非常感谢。天啊，我瞎了！非常感谢。