Question

我对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不是对象”。我试图阅读地图文档，但没有回答我的问题。

Answer 1

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>
    );
}

Answer 2

您的渲染功能如下所示：

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

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

通过将map放入呈现函数，就不需要renderCategories存在。

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

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

Answer 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>
    );
}

Answer 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>
    );
  }
}

如何在数组中正确使用map（）？

4 个答案: