1

我是一般反应 Native 和 Javascript 编程的新手，我试图在 React Native 和 redux 中创建一个简单的“待办事项”应用程序。

我试图在我的减速器中的数组中添加一个“待办事项”，如下所示。

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 结果 ，您可以看到“第一件事”和“第二件事”是我添加的两个结果，它们连接到同一行。

我的第一个想法是我的愚蠢或演示 ListView 有问题，它的数据如下所示。

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

所以我尝试了这个...

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

它有效！这就是我认为错误出在减速器中的原因。

请让我知道还有哪些其他代码有用。任何见解将不胜感激。

这就是行动。

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

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

4 回答 4

2

以下是有关如何将数据实际“推送”到数组中的一些见解

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-18T06:22:55.453 回答
1

你想要数组扩展运算符，即

export default function toDo(state = initialState, action) {
  switch (action.type) {
    case types.ADD:
      return {
        data: [...state.data, action.toDoData]
      }
    default:
      return state;
  }
}
于 2016-12-18T07:35:29.290 回答
1

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

state.data.concat(action.toDoData)

于 2016-12-18T08:00:46.833 回答
0

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

于 2016-12-18T11:55:09.497 回答