今天遇到的問題與解決方法

weixin_33860553發表於2017-04-13

redux

  • 今天在寫專案的時候，由於加了redux，在entry.js裡面匯入了component裡面的元件，結果導致錯誤this.props.onAdd() is not a function，最後改為匯入container裡面的元件解決了這個問題
export default connect(mapStateToProps, mapDispatchToProps)(Add);

通過react-redux提供的connect方法將我們需要的state中的資料繫結到props上，同時繫結展示元件，在展示元件上顯示，所以入口檔案裡面需要匯入容器元件

middle

  • 錯誤做法
const createStoreMiddle = applyMiddleware(AddRequest);
const Store = createStoreMiddle(reducer);
  • 正確做法
const createStoreMiddle = applyMiddleware(AddRequest);
const Store = createStore(reducer,createStoreMiddle);
或者
const createStoreMiddle = applyMiddleware(AddRequest)(createStore);
const Store = createStoreMiddle(reducer);

錯誤原因是沒有將applyMiddleware新增在createStore中

請求狀態

  • 在控制檯network裡面看到請求狀態是pendding，然後發現是後臺沒有響應，導致http處於pendding狀態

webpack

  • 打算新增兩個入口檔案，然後新增之後，很不明白為什麼打包的兩個檔案一個正常，另一個import報錯，不知道是沒有打包成功還是其他問題，但是安裝了npm install babel-cli，將之前的node執行改為babel-node之後解決了這個問題
  • 程式碼如下：
 entry:{
        src:'./src/entry.js',
        route:'./routes/model.js'
    },
    output:{
        path:__dirname+'/public/dist',
        filename:"[name].js"
    },
  • babel-cli是工具自帶一個babel-node命令，提供一個支援ES6的REPL(Read-Eval-Print-Loop，可互動式執行)環境。它支援Node的REPL環境的所有功能，而且可以直接執行ES6程式碼

總結

  • 專案中遇到了很多問題，總的來說還是原理沒有搞清楚，雖然學會了簡單除錯定位問題，但解決問題的能力還是有待提高，今天遇到問題的時候在Stack Overflow上提問，也得到了答案，以後要多多提問，多和同學討論
  • 寫demo真的很有用，簡單的學會一個東西，但有時候遇到問題，因為有上下文環境，所以demo比較難劃分的很小

相關文章