如何在 React 无状态组件中使用 ES6 映射函数

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

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

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

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

另一个问题是，你不能只从getMappedData方法返回一个数组，你需要返回 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 2

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

Answer 3

将呼叫this.props.getMappedData(item[name])更新为this.getMappedData(item[name])

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