Concat實際上連接而不是添加到數組。反應本地的JavaScript

Im新的反應本機和Javascript編程一般，我試圖創建一個簡單的'待辦'應用程序與在React本機和REDX。Concat實際上連接而不是添加到數組。反應本地的JavaScript

我試圖添加'待辦事項'到我的減速器中的數組，如下所示。

import * as types from '../actions/actionTypes' 

const initialState = { 
    data: [] 
}; 

export default function toDo(state = initialState, action) { 

    let list 
    console.log(action + " action") 
    switch (action.type) { 
     case types.ADD: 
     list = state.data.concat([action.toDoData]) 
      return { 
       ...state, 
       data: list || [] 
      } 
     default: 
      return state; 
    } 
}

結果表明 AddToDo Results 你可以看到「第一件事」和「第二件事」是我的兩個新增的結果，他們Concat的到同一行。

我的第一個想法是，我的啞巴或表象ListView出現了一些問題，它將數據如下所示。

<MyList data={this.props.data}/>

所以我想這...

<MyList data={['firstThing', 'secondThing', 'thirdThing']}/>

，它works！這就是我認爲錯誤在減速器中的原因。

請讓我知道其他代碼會有用。任何見解都會受到很大的讚賞。

這是行動。

import * as types from './actionTypes.js'; 

export function addToList(toDoData) { 
    return { 
     type: types.ADD, 
     toDoData: toDoData 
    }; 
}

來源

2016-12-18 tlagreca

僅供參考，你應該總是使用分號。可能會有一些相當醜陋的錯誤。 – 4castle

您的代碼看起來不錯，只需修改console.log並添加更多的代碼即可找到問題。他們應該看起來像這樣：'console.log（'action'，action）;'（逗號而不是加號） –

與你的答案並不真正相關，但我會在你的reducer中使用Immutable。當然你不必這樣做，但是如果沒有它，我會遇到一些關於對象引用的討厭的錯誤。不可變類型的方法也將極大地幫助您操作數據結構！ – stinodes

這裏有一些見解如何，你實際上是 '推' 數據到一個數組

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.push("Kiwi"); 

//fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];

或者你可以

export default function toDo(state = initialState, action) { 
    switch (action.type) { 
    case types.ADD: 
     return { 
     data: [...state.data, action.toDoData] 
     } 
    default: 
     return state; 
    } 
}

來源

2016-12-18 06:22:55

不可變的Javascript我認爲是目標，雖然沒有？ – tlagreca

你仍然可以使用傳播操作符並同時推送數組:) –

我相信這是正確的答案 – eden

要在陣列傳播經營者，即

export default function toDo(state = initialState, action) { 
    switch (action.type) { 
    case types.ADD: 
     return { 
     data: [...state.data, action.toDoData] 
     } 
    default: 
     return state; 
    } 
}

來源

2016-12-18 07:35:29 chrisfisher

是你的action.toDoData和陣列？如果是的話，那麼它應該是

state.data.concat（action.toDoData）

來源

2016-12-18 08:00:46 Habibi

不用它只是字符串輸入。 Iv用行動編輯了問題。 – tlagreca

我覺得莫名其妙，到你的第一循環中，您添加串入state.data ... 嘗試是這樣的： list = state.data.concat(action.toDoData)
或用ES6傳播：
list = [...state.data, action.toDodata]

來源

2016-12-18 11:55:09 adamTrz

Concat實際上連接而不是添加到數組。反應本地的JavaScript

回答

相關問題