【问题标题】:How do I turn part of Redux store into an array如何将部分 Redux 存储转换为数组
【发布时间】:2017-02-05 22:15:41
【问题描述】:

好的,这是我的泡菜,我在actions/index.js 中的一个操作是:

export function requestPeople() {
  return (dispatch, getState) => {
    dispatch({
      type: REQUEST_PEOPLE,
    })

  const persistedState = loadState() // just loading from localStorage for now
  console.log(persistedState)


  //Object.keys(persistedState).forEach(function(i) {
  //var attribute = i.getAttribute('id')

      //console.log('test', i,': ', persistedState[i])
      //myArr.push(persistedState[i])

    //})
    //console.log(myArr)
  //dispatch(receivePeople(persistedState)) // I'm stuck here
 }
}

当我在 Chrome 控制台中从上方console.log(persistedState) 时,我的people 状态与此完全相同。

Object {people: Object}

然后当我深入到上面的people: Object 时,我会得到这样的结果:

abc123: Object
abc124: Object
abc125: Object

当我深入研究每只小狗时(通过点击 Chrome 控制台中的小三角形),我得到的每只小狗都是这样的:

abc123: Object
  firstName: 'Gus'
  id: 'abc123'
  lastName: 'McCrae'

// when I drill down into the second one I get
abc124: Object
  firstName: 'Woodrow'
  id: 'abc124'
  lastName: 'Call'

现在,这就是我卡住的地方。

我使用的表是 Allen Fang 的 react-bootstrap-table,它只接受数组,它被称为 <BootstrapTable data={people} /> 所以我上面的数据需要转换成这样的数组:

const people = [{
  id: abc123,
  firstName: 'Gus',
  lastName: 'McCrae'
}, {
  id: abc124,
  firstName: 'Woodrow',
  lastName: 'Call'
}, {
  ...
}]

// and eventually I'll call <BootstrapTable data={people} />

我的具体问题是如何将上面显示的people 状态转换为这个必要的数组?在我尝试过的action/index.js 文件中:Object.keys(everything!!!)

最后,一旦我有了数组,使用状态、变量、分派动作(我从未听说过)将该数组传递给 &lt;BootstrapTable data={here} /&gt; 的最佳方法是什么?

任何帮助将不胜感激!仅供参考,这是我在 Stack Overflow 中的第一个问题,感觉很怀旧。我是一名全职警官,并试图在一边学习编码。再次感谢!

更新:

多亏了 Piotr Berebecki 的建议,我才把它绑起来:

export function requestPeople() {
  return (dispatch, getState) => {
    dispatch({
      type: REQUEST_PEOPLE,
    })

const persistedState = loadState()
console.log('persistedState:', persistedState)

const peopleArr = Object.keys(persistedState.people).map(function(key) {
  return persistedState[key]
})

console.log(JSON.stringify(peopleArr))

//dispatch(receivePeople(persistedState))
  }
}

得到 [null,null,null]

像这样:

【问题讨论】:

    标签: javascript arrays reactjs redux react-bootstrap-table


    【解决方案1】:

    欢迎来到 Stack Overflow :)

    要将嵌套的 persistedState.people 对象转换为数组,您可以首先使用 Object.keys(persistedState.people) 建立一个临时键数组,然后在键上使用 map() 以将每个键替换为原始嵌套对象中的对象 - @ 987654325@ - 在那个键上。您可以将结果数组分配给一个变量,然后您可以将其传递给BootstrapTable。检查下面的代码和这里的演示:http://codepen.io/PiotrBerebecki/pen/yaXrVJ

    const persistedState = { 
      people: { 
        'abc123' : {
          id:'abc123',firstName: 'Gus', lastName: 'McCrae'
        }, 
        'abc124' : {
          id:'abc124',firstName: 'Woodrow', lastName: 'Call'
        }, 
        'abc125' : {
          id:'abc125',firstName: 'Jake', lastName: 'Spoon'
        }
      }
    }
    
    
    const peopleArr = Object.keys(persistedState.people).map(function(key) {
      return persistedState.people[key];
    });
    
    
    console.log(JSON.stringify(peopleArr));
    /* 
    Logs the following array:
    [
     {"id":"abc123","firstName":"Gus","lastName":"McCrae"},
     {"id":"abc124","firstName":"Woodrow","lastName":"Call"},
     {"id":"abc125","firstName":"Jake","lastName":"Spoon"}
    ]
    */
    

    【讨论】:

    • 感谢您的帮助!但是,我只是尝试了您的建议。但我认为我的 peopleObj 设置有点不同,我收到了[{"abc123":{"id":"abc123","firstName":"Gus","lastName":"McCrae"},"abc124":{"id":"abc124","firstName":"Woodrow","lastName":"Call"},"abc125":{"id":"abc125","firstName":"Jake","lastName":"Spoon"}}]
    • 这是我的 reducer 中用于创建 peopleObj 的代码:const initialValues = { people: { 'abc123' : {id:'abc123',firstName: 'Gus', lastName: 'McCrae'}, 'abc124' : {id:'abc124',firstName: 'Woodrow', lastName: 'Call'}, 'abc125' : {id:'abc125',firstName: 'Jake', lastName: 'Spoon'} , }, addingPerson: false, }
    • 我刚刚更新了我的代码和 codepen。看看它是否能解决您的问题。
    • 我觉得这样可以解决问题,我今晚下班回家后试试看。如果是这样,如果我有正确的 Stack Overflow 权限,我会“接受”并“投票”。如果我没有特权,我会在我这样做的时候投赞成票:) 谢谢!!
    • 哦,这么近!现在我收到[null, null, null] 我会尝试包含一张图片。再次感谢大家的帮助!
    猜你喜欢
    • 2017-10-24
    • 1970-01-01
    • 2023-03-22
    • 2021-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-28
    相关资源
    最近更新 更多