React 无状态组件中如何使用 ES6 map 函数

Question

在我的 React 应用程序中，我有一个对象数组，我通过 api 响应获得这些对象。我想在手风琴中显示每个对象的细节。我正在使用反应可访问的手风琴并创建了一个反应无状态组件。我希望我的每个手风琴都代表数组的一个对象。我在 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)

这样做时，这给了我错误-

Uncaught ReferenceError: item is not defined

谁能告诉我我哪里出错了？提前致谢。

Answer 1

将您的通话 this.props.getMappedData(item[name]) 更新为 this.getMappedData(item[name])

它找不到的原因是道具通常用于将数据从父级传递给子级。这个博客 post 很好地解释了它。 https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

Answer 2

我认为您遗漏了两件事 - 首先，您的 getMappedData 方法没有右大括号。其次，if条件需要return一个值：

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

此外，方法调用应该是 this.getMappedData 而不是 this.props.getMappedData，因为该方法是在 class 上定义的，而不是来自 props

另一个问题是，你不能只是 return 来自 getMappedData 方法的数组，你需要 return jsx，所以它可能应该是这样的：

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

假设 item 是一个字符串或数字。如果它是一个对象或数组，它将不起作用。

你的渲染方法也可以只使用 {this.getMappedData()} 不需要里面的道具，你的 getMappedData 方法可以使用道具：

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

Answer 3

回答您最初的问题： 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>
        }

React 无状态组件中如何使用 ES6 map 函数

How to use ES6 map function in React stateless component

javascript

reactjs

es6-map