反应 CRUD 操作总是使用状态

Posted 2023-02-22

【中文标题】反应 CRUD 操作总是使用状态

【英文标题】：React CRUD operations always using state

【发布时间】：2016-06-17 01:27:53

【问题描述】：

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

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

我对 React/Flux 还很陌生，不知道我做错了什么或为什么会发生这种情况。

主组件删除功能：

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。

【问题讨论】：

您能否在元素上发布您的事件绑定，并在主组件的第一个 deleteItem 方法中发布控制台日志？此外，通常人们会执行一个会影响商店的动作，而不是相反。

@janpieter_z 我添加了更多代码。我知道该操作应该完成大部分工作，但是，我以我正在遵循的示例为基础，这就是他们设置它的方式。

我没有看到对 QuestionSource.deleteQuestion 的实际调用。确定是店里的？您可以发布 QuestionActions 吗？我认为你应该从你的按钮点击绑定中调用那个。

@janpieter_z @​​987654325@ 公开了包含 deleteQuestion 函数的 questionSource 函数

啊，我错过了那个，抱歉。如果在deleteQuestion 方法中添加另一个参数会怎样？第一个我会打电话给state，第二个是id。然后记录 ID，我猜你应该看到它有正确的 ID。

【参考方案1】：

绑定到动作的第一个参数是存储的状态（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
    

Documentation from alt.js about handling async operations.