Javascript 如何在React无状态组件中使用es6map函数

在我的React应用程序中，我有一个通过api响应获得的对象数组。我想在手风琴中显示每个对象的细节。我正在使用react-accessible accordion并创建了一个react无状态组件。我希望我的每个手风琴代表阵列中的一个对象。我在dataProp中有我的对象数组，并在上面迭代 我已经像下面这样写了我的组件-

import React from 'react';
import ReactDOM from 'react-dom';
import ChildAccordion from './ChildAccordion'
import { setData } from '../actions/action'
import { connect } from 'react-redux'

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';


class ParentAccordion extends React.Component {

    componentWillMount() {
      //call to action
      this.props.setData();
  }

  getMappedData = (dataProp) =>{
      if (dataProp) { 
         return dataProp.map(item =>{
            return <div>{dataProp[item]}</div>
        })
      }
      else {
       return "";
      }
}

    render(){
        const { dataProp } = this.props;
        return (
            // RENDER THE COMPONENT
                <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Details: 
               { 
                this.getMappedData(item[name])
               }

                </h3>
            </AccordionItemTitle>
            <AccordionItemBody>
            <ChildAccordion {...dataProp} />
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
        );
    }
}


const mapStateToProps = state => {
    return {
        dataProp: state.dataProp
    }
};

const mapDispatchToProps = dispatch => ({
  setData(data) {
    dispatch(setData(data));
  }
})
export default connect (mapStateToProps,mapDispatchToProps) (ParentAccordion)

---

有人能告诉我哪里出了问题吗？提前感谢。

更新您的呼叫

this.props.getMappedData（项目[名称]）

至

this.getMappedData（项目[名称]）

---

它找不到的原因是，道具通常用于将数据从父级传递到子级。这篇博文很好地解释了这一点

我认为您遗漏了两件事-首先，您的

getMappedData

方法没有右大括号。其次，if条件需要返回一个值：

getMappedData = (dataProp) =>{
      if (dataProp) { 
        return dataProp.map(item =>{
            return item;
        })
      }
      else {
       return "";
      }
}

另外，方法调用应该是

this.getMappedData

not

this.props.getMappedData

，因为该方法是在类上定义的，而不是从props进入的

另一个问题是，您不能仅从

getMappedData

方法返回数组，您需要返回jsx，因此它可能类似于：

getMappedData = (dataProp) =>{
      if (dataProp) { 
        return dataProp.map(item =>{
            return <div>{item}</div>;
        })
      }
      else {
       return "";
      }
}

---

要回答您最初的问题： dataProp数组可以简单地按以下方式呈现：

  render(){
      const { dataProp } = this.props;

      return <Accordion>
            {
              dataProp && dataProp.map(item =>
              <AccordionItem>
                <AccordionItemTitle>
                  <h3>
                    Details: {item.title}
                  </h3>
                </AccordionItemTitle>
                <AccordionItemBody>
                  {item.body}
                </AccordionItemBody>
              </AccordionItem>
            )}
          </Accordion>
        }

render（）{
const{dataProp}=this.props；
返回
{
dataProp&&dataProp.map（项=>
详细信息：{item.title}
{item.body}
)}
}

我的错，是打字错误。我只使用这个.getMappedData（项[名称]）。编辑了这篇文章。谢谢你指出。我已经添加了更改，但是在调用方法时，我得到了错误-未捕获引用错误：项目未定义。你能复制新代码并将其粘贴到原始问题下面吗？可能标题为“编辑”或其他什么你的返回看起来有问题-它不应该是

return dataProp[item]

查看我的代码-它应该是

{item}

假设item不是objectcorrect，我修改并添加了大括号，仍然是相同的问题：（让我们来看看）。

getMappedData() {
      const { dataProp } = this.props;
      if (dataProp) { 
        return dataProp.map(item =>{
            return <div>{item}</div>;
        })
      }
      else {
       return "";
      }
}

  render(){
      const { dataProp } = this.props;

      return <Accordion>
            {
              dataProp && dataProp.map(item =>
              <AccordionItem>
                <AccordionItemTitle>
                  <h3>
                    Details: {item.title}
                  </h3>
                </AccordionItemTitle>
                <AccordionItemBody>
                  {item.body}
                </AccordionItemBody>
              </AccordionItem>
            )}
          </Accordion>
        }