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上提供工作样本，那么这将有助于更好地调试问题。

根据我的经验，这通常发生在州发生变异时。您可以尝试在reducer上使用以下格式：

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

现有功能正在改变state=...

处的现有状态

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

PS：此外，您在减速机的最后两个操作案例中缺少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;
}

React + Redux不会更新商店

2 个答案: