如何在数组中正确使用 map()？答案

【问题标题】：How to properly use map() in a array?如何在数组中正确使用 map()？
【发布时间】：2023-03-25 05:20:01
【问题描述】：

我很擅长 react 和 JS，所以，这可能是一个愚蠢的问题，但是，当我尝试在这样的数组中使用 .map() 时：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  productsArray = [
    'Cajo T-shirt',
    'Geometric Skull',
    'Bavaria 350 mL',
    'Inflatable Alien',
    'R2D2 RC Car',
  ];
renderCategories(arrayDeProdutos) {
    return arrayDeProdutos.map((index) => <Text key={index}></Text>);
}
render() {
    return (
        <View style={styles.container}>
            {this.renderCategories()}
        </View>
    );
}
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

我收到以下错误消息：“arrayDeProdutos.map 不是对象”。我试图阅读地图文档，但它没有回答我的问题。

【问题讨论】：

{this.renderCategories(this.productsArray)}
在{this.renderCategories()} 你需要传递参数。改为{this.renderCategories(this.productsArray)}

标签： javascript arrays reactjs dictionary

【解决方案1】：

您的渲染函数如下所示：

render() {
    return (
        <View style={styles.container}>
            {this.productsArray.map((prod, index) => <Text key={index}>{prod}</Text>)}
        </View>
    );
}

请注意，map 会将您的项目的索引作为第二个参数而不是第一个参数返回。

通过将map 放入渲染函数中，renderCategories 就不需要存在了。

如果它可以在运行时更改，我还建议将此数组置于您的状态。这将允许您的应用在对文本进行任何更改后重新呈现您的文本。

另外，类中声明的任何内容都可以通过同一类中的this. 访问，无需传递任何参数。

【讨论】：

【解决方案2】：

renderCategories 方法需要一个参数，但您没有传递任何参数，如下所示：

<View style={styles.container}>
    {this.renderCategories()}
</View>

这就是你需要做的事情。

renderCategories(arrayDeProdutos) {
    return arrayDeProdutos.map((index) => <Text key={index}></Text>);
}
render() {
    return (
        <View style={styles.container}>
            {this.renderCategories(this.productsArray)}
        </View>
    );
}

【讨论】：

哦，对了，我忘记传参数了……我试试，谢谢

【解决方案3】：

您需要将参数传递给renderCategories()。所以改变

render() {
    return (
        <View style={styles.container}>
            {this.renderCategories()}
        </View>
    );
}

到

render() {
    return (
        <View style={styles.container}>
            // pass "this.productsArray" as an argument
            {this.renderCategories(this.productsArray)}
        </View>
    );
}

【讨论】：

【解决方案4】：

是的，其他答案都是正确的，但我不同意在这种情况下使用索引。另外，我认为在真实情况下，您将从后端获取数据，并且很可能您将拥有id。因此，您可以将您的id 用作index。（我更喜欢箭头函数）

const productsArray = [
  "Cajo T-shirt",
  "Geometric Skull",
  "Bavaria 350 mL",
  "Inflatable Alien",
  "R2D2 RC Car"
];

export default class App extends React.Component {
  //using arrow function

  renderCategories = products => products.map(product => <Text key={product}>{product}</Text>);

  render() {
    return (
      <div style={styles.container}>{this.renderCategories(productsArray)}</div>
    );
  }
}

【讨论】：