最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin4浏览0评论

Im new to react Native and Javascript programming in general and Im trying to create a simple 'To Do' app with in React Native and redux.

Im attempting to add a 'To Do' to the the array in my reducer as seen below.

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

The result shows AddToDo Results you can see 'First Thing' and 'Second Thing' are my two added results and they concat onto the same row.

My first thought was that there was something wrong with my dumb or presentational ListView which takes it data as below.

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

So i tried this...

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

and it works!!! This is the reason I'm thinking the error is in the reducer.

Please let me know what other code would be useful. Any insights would be MUCH appreciated.

This is the action.

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

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

Im new to react Native and Javascript programming in general and Im trying to create a simple 'To Do' app with in React Native and redux.

Im attempting to add a 'To Do' to the the array in my reducer as seen below.

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

The result shows AddToDo Results you can see 'First Thing' and 'Second Thing' are my two added results and they concat onto the same row.

My first thought was that there was something wrong with my dumb or presentational ListView which takes it data as below.

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

So i tried this...

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

and it works!!! This is the reason I'm thinking the error is in the reducer.

Please let me know what other code would be useful. Any insights would be MUCH appreciated.

This is the action.

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

export function addToList(toDoData) {
    return {
        type: types.ADD,
        toDoData: toDoData
    };
}
Share edited Dec 18, 2016 at 8:50 tlagreca asked Dec 18, 2016 at 4:06 tlagrecatlagreca 3651 gold badge6 silver badges20 bronze badges 3
  • Just FYI you should always use semicolons. There can be some pretty ugly bugs. – castletheperson Commented Dec 18, 2016 at 4:16
  • Your code looks right, just fix console.log and add more of them to find the problem. They should look like this: console.log('action', action); (ma instead of plus sign) – Bruno Lemos Commented Dec 18, 2016 at 18:00
  • Not really related to your answer, but I'd use Immutable in your reducers. You don't have to of course, but I've e across some nasty bugs regarding object references without it. Immutable-types' methods would also greatly help in manipulating your data structures! – stinodes Commented Dec 19, 2016 at 9:12
Add a ment  | 

4 Answers 4

Reset to default 2

Here's some insights on how you actually 'push' data into an array

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

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

Or you can just

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

You want the array spread operator, i.e.

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

is your action.toDoData an array? If yes, then it should be

state.data.concat(action.toDoData)

I think that somehow, into your first loop you added string into state.data... Try something like this: list = state.data.concat(action.toDoData)
Or with ES6 spread:
list = [...state.data, action.toDodata]

发布评论

评论列表(0)

  1. 暂无评论