如何在 map 函数的每次迭代后渲染不同的组件

Question

我正在从 http://retailsolution.pk/api/allhome I want to display the title of the product and then all the child products below it, I am getting this output: 获取数据这是我的代码：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Deals: []
    };
  }
  componentWillMount() {
    axios
      .get("https://retailsolution.pk/api/allhome")
      .then(response => this.setState({ Deals: response.data.Deals }));
  }

  _renderItem(item) {
    return (
      <View style={{ width: 100, height: 130 }}>
        <Image
          style={{ width: 100, height: 100 }}
          source={{ uri: item.image }}
        />
        <Text numberOfLines={1} style={{ flex: 1 }}>
          {" "}
          {item.name}
        </Text>
      </View>
    );
  }

  renderTitle() {
    return this.state.Deals.map(deal => (
      <Text key={deal.parent.id} style={styles.text}>
        {deal.parent.name}
      </Text>
    ));
  }
  renderImage() {
    return this.state.Deals.map(deal => (
      <FlatList
        key={deal.child.product_id}
        style={{ marginTop: 5 }}
        horizontal
        ItemSeparatorComponent={() => <View style={{ width: 5 }} />}
        renderItem={({ item }) => this._renderItem(item)}
        data={[deal.child]}
      />
    ));
  }
  render() {
    console.log(this.state.Deals);
    return (
      <View style={{ flex: 1, marginLeft: 8, marginRight: 8, marginTop: 10 }}>
        {this.renderTitle()}
        {this.renderImage()}
      </View>
    );
  }
}

在我的例子中，{this.renderTitle()} 首先执行并将每个值从 api 映射到应用程序，然后 {this.renderImage()} 将所有平面列表映射到应用程序。

有什么办法可以运行 this.renderImage() 在每次迭代 rhis.renderTitle() 之后？

Answer 1

您必须使用嵌套循环来完成。尝试这样的事情 -

{this.state.Deals.map(deal => {
  return (
    <div>
      <Text key={deal.parent.id} style={styles.text}>
        {deal.parent.name}
      </Text>
      {deal.child.map(item => {
        return (
          <FlatList
            key={item.product_id}
            style={{ marginTop: 5 }}
            horizontal
            ItemSeparatorComponent={() => <View style={{ width: 5 }} />}
            renderItem={({ item }) => this._renderItem(item)}
            data={[item]}
          />
        );
      })}}
    </div>
  );
})}

Answer 2

一种方法是在提取之后调用一个函数，该函数将为具有正确格式的 Flatlist 创建部分数据：

sections = [{title: 'Latest', data:["The products data array"]}, {title: 'second section', data : ["Other products"]}, and so on...]`

如何在 map 函数的每次迭代后渲染不同的组件

how to render a different component after every iteration of map function

javascript

reactjs

react-native