Javascript 始终使用状态来反应积垢操作

我正在构建一个React应用程序，使用altjs作为我的Flux实现。当我尝试从前端创建/删除一个项时，无论我将什么作为参数传递给create/delete函数，它最终都会传递整个状态

例如：我试图删除id为1的项。我在该项上单击delete，并将id传递给组件中的delete函数。该函数再次调用delete服务并传递id。一旦到达存储层，它就拥有组件的整个状态，而不仅仅是传递的id

我对反应/变化还相当陌生，不知道我做错了什么，也不知道为什么会这样

主要组件删除功能：

deleteItem = (id) => {
        console.log(id) //logs out 56b36c34ad9c927508c9d14f
        QuestionStore.deleteQuestion(id);
    }

此时，id仍然只是id

问题库：

import alt from '../core/alt';
import QuestionActions from '../actions/QuestionActions';
import QuestionSource from '../sources/QuestionSource';

class QuestionStore {
    constructor() {
        this.bindActions(QuestionActions);
        this.exportAsync(QuestionSource);
        this.loaded = false;
        this.modalIsOpen = false;
        this.data = [];
        this.question = {
            "text": '',
            "tag": [],
            "answer": [],
            "company": [],
            "createdAt": ''
        };
        this.error = null;
        this.questionAdded = null;
        this.questionDeleted = null;
    }

    onGetQuestions(data) {
        if (data === false) {
            this.onFailed();
        } else {
            this.data = data;
            this.loaded = true;
        }
    }

    onCreateQuestion(response) {
        if (response === false) {
            this.onFailed();
        } else {
            this.questionAdded = response;
        }
    }

    onDeleteQuestion(response) {
        if (response === false) {
            this.onFailed();
        } else {
            this.questionDeleted = response;
        }
    }

    onFailed(err) {
        this.loaded = true;
        this.error = "Data unavailable";
    }
}

export default alt.createStore(QuestionStore, 'QuestionStore');

问题来源：

import Api from '../services/QuestionApi';
import QuestionActions from '../actions/QuestionActions';

let QuestionSource = {
    fetchData() {
        return {
            async remote(state) {
                return Api.getQuestions()
            },
            success: QuestionActions.getQuestions
        }
    },

    createQuestion(question) {
        return {
            async remote(question) {
                return Api.createQuestion(question)
            },
            success: QuestionActions.createQuestion
        }
    },

    deleteQuestion(id) {
        //id here is an object of the entire state of QuestionStore
        return {
            async remote(id) {
                return Api.deleteQuestion(id)
            },
            success: QuestionActions.deleteQuestion
        }
    }
};

export default QuestionSource;

---

一旦到达这一点，id就是组件的整个状态，即使只传递id。

绑定到操作的第一个参数是存储的状态（exportAsync调用结果的一部分。因此，所有参数都向右移动一个，调用函数时使用的第一个参数将变成第二个参数。请参见下面的代码示例：

deleteQuestion(state, id) {
    //state here is an object of the entire state of QuestionStore
    //id will be the first argument you provide to the function.
    return {
        async remote(id) {
            return Api.deleteQuestion(id)
        },
        success: QuestionActions.deleteQuestion
    }
}

---

绑定到操作的第一个参数是存储的状态（属于

exportAsync

调用结果的一部分）。因此，所有参数向右移动一个，调用函数的第一个参数依次成为第二个参数。请参见下面的代码示例：

deleteQuestion(state, id) {
    //state here is an object of the entire state of QuestionStore
    //id will be the first argument you provide to the function.
    return {
        async remote(id) {
            return Api.deleteQuestion(id)
        },
        success: QuestionActions.deleteQuestion
    }
}

---

能否在元素上发布事件绑定，并在主组件的第一个

deleteItem

方法中发布控制台日志？另外，通常情况下，一个操作会影响存储，而不是相反。@janpieter_z我添加了更多代码。我知道该操作应该完成大部分工作，但是，我基于这是我所遵循的一个示例，这是他们如何设置的。我看不到对QuestionSource.deleteQuestion的实际调用。你确定它来自商店吗？你能发布QuestionActions吗？我想你应该从按钮单击绑定调用它。@Janpier_z

this.exportAsync（QuestionSource）；

公开包含deleteQuestion函数的questionSource函数。对不起，我错过了这个函数。如果您在

deleteQuestion

方法中添加另一个参数会怎么样？第一个参数我会调用

state

，第二个

id

。然后记录id，我猜您应该会看到它有正确的id。您可以发布吗元素上的事件绑定，以及主组件中第一个

deleteItem

方法中的控制台日志？此外，通常会执行一个会影响存储的操作，而不是相反。@Janpier_z我添加了更多的代码。我知道该操作应该完成大部分工作，但是，我基于一个示例，我下面是他们的设置方式。我看不到对QuestionSource.deleteQuestion的实际调用。你确定它来自商店吗？你能发布QuestionActions吗？我想你应该从按钮单击绑定中调用它。@janpier_z

this.exportAsync（QuestionSource）；

公开包含deleteQuestion函数的questionSource函数。很抱歉，我错过了这个函数。如果您在

deleteQuestion

方法中添加另一个参数会怎么样？第一个参数我将调用

state

，第二个

id

。然后记录id，我猜您应该会看到它有正确的id。