React + Redux 不更新存储

Question

我正在使用 React 和 Redux 做电话列表，但遇到了问题。 应该期待什么：用户将他的数据以模态形式放置，当他单击提交按钮时 - onClick 函数触发并将数据分派到 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);

减速机：

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 或其他东西的工作示例，那将有助于更好地调试问题。

根据我的经验，这通常发生在状态发生突变时。您能否尝试在减速器上使用以下格式：

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

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

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

PS：另外，您在 reducer 的最后两个操作案例中缺少 break 语句。还有你的default 案例

Answer 2

你不应该直接在 React 或 Redux 中改变状态。使用 Redux，您希望始终返回一个新对象来替换之前的状态。

也许可以试试这样的方法？

switch (action.type) {
    case 'SET_INPUT':
        return {
            ...state,
            input: action.payload
        };
    case 'SET_USER':
        return {
            ...state,
            users: [...state.users, action.payload]
        };
    case 'SET_FORM_MODAL_STATUS':
        return {
            ...state,
            formModalStatus: action.payload
        };
    case 'SET_SUCCESS_MODAL_STATUS':
        return {
            ...state,
            successModalStatus: action.payload
        };
    default:
        return state;
}