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操作始終使用狀態

回答

相關問題