React CRUD操作始终使用状态

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

例如：我试图删除id = 1的项目。我点击该项目上的删除，并将该ID传递给组件中的删除功能。该函数再次通过传递ID来调用删除服务。一旦到达存储层，它就具有组件的整个状态，而不仅仅是传递的ID。

我对React/Flux还是比较新的，不知道我在做什么错，或者为什么会发生这种情况。

主要组件删除功能：

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

此时ID仍然只是ID。

QuestionStore：

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');

QuestionSource：

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传递组件的整个状态。

来源

2016-03-03 erichardson30

你能不能从第一'deleteItem'方法中的主要成分发布您的活动元素结合，并且控制台日志此外，是否正常？一个人会执行一个会影响商店的行动，而不是相反。 –

@janpieter_z我添加了更多的代码。我知道这个行动应该完成大部分工作，但是，我以这个例子为基础，并且这是他们如何建立的。 – erichardson30

我没有看到对QuestionSource.deleteQuestion的真实调用。你确定它是从商店？你可以发布QuestionActions吗？我想你应该从你的按钮点击绑定中调用一个。 –

与动作绑定的第一个参数是商店的状态（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.

来源

2016-03-04 17:18:27

React CRUD操作始终使用状态

回答

相关问题