使用Lodash _.map将对象转换为数组，并在React中使用map函数

Question

我在React中使用map函数来迭代数据时遇到了一个问题，因为数据是对象。所以我尝试使用Lodash的_.map函数将对象转换为数组。然后我想使用map函数迭代数据。

它没有像我预期的那样工作，我想知道这是什么问题。

它应该有效吗？可以使用_.map迭代React吗？

数据结构

代码

import React, { Component } from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { addData } from "../actions/index";
import _ from "lodash";

class List extends Component{
    componentDidMount(){
        this.props.addData()
    }
    render(){
        let item;
        if(this.props.data) {
          item = _.map(this.props.data, data => {

         return (
             <li key={data.id}>
             {data.title}
             </li>
         /* this returns empty data. Only bullet button appears.
         In console, it says [Each child in an array or iterator should have a unique "key" prop.]
         Even though I added a key value. */
         )
     })
    }   


return(
    <div>{item}</div>
)
}
}

function mapStateToProps(state){
    return {
    data : state.data
}
}

export default connect(mapStateToProps, {addData})(Search);

更新

要进行调试，请执行console.log(this.props.data)生成此输出：

Object { data: Array[100] }

Answer 1

根据您的console.log(this.props.data)输出，我们可以看到分配给this.props.data的值为：

{ data : [ /* fetched objects... */ ] }

您尝试拨打map的数组比您预期的更深，所以您的mapStateToProps中确实没有正确选择提取和存储的数据。 / p>

请改为尝试：

function mapStateToProps(state){
  return {
    data : state.data.data
  }
}