javascript - React + Redux 不更新存储

Question

我正在使用 React 和 Redux 制作电话列表，但遇到了问题。应该期待什么:用户以模态形式输入数据，当他单击“提交”按钮时，onClick 函数会触发并将数据分派(dispatch)到 Redux 存储，然后从存储转到 localStorage，所有数据都将存储在本地存储中。

问题:创建的是空数组，而不是创建包含存储数据的对象的数组。下次单击“提交”按钮后 - 第一次单击的数据将代替空数组。如此下去。

对于普通的 React setState 也有同样的问题。

代码:

应用程序:

import React from "react";
import { Input } from "../components/Input";
import { Table } from "../components/Table";
import { ButtonAdd } from "../components/ButtonAdd";
import { connect } from "react-redux";
import { setInput, setUser, setFormModalStatus, setSuccessModalStatus} from 
"../actions/dataActions";

class App extends React.Component {

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.openFormModal = this.openFormModal.bind(this);
    this.closeFormModal = this.closeFormModal.bind(this);
    this.openSuccessModal = this.openSuccessModal.bind(this);
    this.closeSuccessModal = this.closeSuccessModal.bind(this);
}

openFormModal() {
    this.props.setFormModalStatus(true);
}

closeFormModal() {
    this.props.setFormModalStatus(false);
}

openSuccessModal() {
    this.props.setSuccessModalStatus(true);
}

closeSuccessModal() {
    this.props.setSuccessModalStatus(false);
}

handleSubmit(e) {
    this.closeFormModal();
    this.openSuccessModal(); //this is for modals

    const datas = this.props.form.input.values //{name: 'Rick', tel: 12345}
    this.props.setUser(datas); //making dispatch with data

    console.log(this.props.data.users); // [] - the issue

    const testData = {name: Josh, tel: 54321};
    this.props.setUser(testData);

    console.log(this.props.data.users); //[{name: 'Rick, tel: 12345}]

    e.preventDefault();
    this.props.form.input.values = '';
}
render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-xs-12 col-md-10 col-md-offset-1">
                    <div className="box">
                        <Input input={this.props.input}/>
                        <ButtonAdd 
                            formModalStatus=
{this.props.data.formModalStatus}
                            successModalStatus=
{this.props.data.successModalStatus}
                            openFormModal={this.openFormModal}
                            closeFormModal={this.closeFormModal}
                            closeSuccessModal={this.closeSuccessModal}
                            handleSubmit={this.handleSubmit}
                        />
                    </div>
                    <Table />
                </div>
            </div>
         </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        data: state.data,
        form: state.form
    };
  };

const mapDispatchToProps = (dispatch) => {
    return {
        setInput: (input) => {
            dispatch(setInput(input));
        },
        setUser: (user) => {
            dispatch(setUser(user));
        },
        setFormModalStatus: (boolean) => {
            dispatch(setFormModalStatus(boolean));
        },
        setSuccessModalStatus: (boolean) => {
            dispatch(setSuccessModalStatus(boolean));
        }
    };
};

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

reducer :

const dataReducer = (state = {
    input: "",
    users: [],
    formModalStatus: false,
    successModalStatus: false
}, action) => {
    switch (action.type) {
        case "SET_INPUT":
            state = {
                ...state,
                input: action.payload
            };
            break;
        case "SET_USER":
             state = {
                ...state,
                users: [...state.users, action.payload]
            };
            break;
        case "SET_FORM_MODAL_STATUS":
            state = {
                ...state,
                formModalStatus: action.payload
            }
        case "SET_SUCCESS_MODAL_STATUS":
            state = {
                ...state,
                successModalStatus: action.payload
            }
    }
    return state;
};

export default dataReducer;

适当的行动:

export function setUser(user) {
    return {
        type: "SET_USER",
        payload: user
    };
}

Answer 1

如果您可以提供有关 WebpackBin 或其他内容的工作示例，这将有助于更好地调试问题。

根据我的经验，这通常发生在状态发生突变时。您可以尝试在您的 reducer 上使用以下格式吗:

state = {
            state.set('users', [...state.users, action.payload])
        };

现有功能正在改变 state=... 处的现有状态

state = {
            ...state,
            users: [...state.users, action.payload]
        };

PS:此外，您在 reducer 的最后两个操作案例中缺少 break 语句。以及您的默认情况