Concat 实际上连接而不是添加到数组。反应本机 Javascript

Question

我是 React Native 和 Javascript 编程的新手，我正在尝试使用 React Native 和 redux 创建一个简单的 'To Do' 应用程序。

我正在尝试将 'To Do' 添加到我的 reducer 中的数组，如下所示。

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 你可以看到 'First Thing' 和 'Second Thing' 是我添加的两个结果，它们连接到同一行。

我的第一个想法是我的 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
    };
}

Answer 1

这里有一些关于如何实际 'push' 将数据放入数组的见解

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;
  }
}

Answer 2

您需要数组展开运算符，即

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

Answer 3

你的action.toDoData是数组吗？如果是，那么应该是

state.data.concat(action.toDoData)

Answer 4

我认为不知何故，在您的第一个循环中，您将字符串添加到 state.data... 尝试这样的事情： list = state.data.concat(action.toDoData)
或者使用 ES6 传播：
list = [...state.data, action.toDodata]

Concat 实际上连接而不是添加到数组。反应本机 Javascript

Concat actually concatenates instead of adds to array. React Native Javascript

javascript

react-native

redux

react-native-listview