Question

我正在从http://retailsolution.pk/api/allhome获取数据，我想显示产品的标题，然后显示其下的所有子产品，我得到以下输出：这是我的代码：

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()}将所有平面列表映射到应用程序。

在每次rhis.renderTitle（）迭代之后，有什么方法可以运行this.renderImage（）吗？

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函数每次迭代后如何呈现不同的组件

2 个答案: