Question

我得到这些数据作为响应

[
  {
    "breakfast": [
      "3x Eggs",
      "2x Bread",
      "Cup of Milk",
    ],
    "lunch": [
      "1/4 Chicken breast",
    ],
    "dinner": [
      "1x Apple",
    ],
    "snack": [],
    "_id": "5dd5224d76cf581424e1bb84",
  },
]

我想这样显示它们

这是我的代码

async componentDidMount(){
  const breakfast = [];
  const headers = {
    'Authorization': GLOBAL.jwt
  };
  await axios({
    method: 'GET',
    url: 'http://192.168.1.101:4040/users/dietData',
    headers: headers,
  }).then((response) => {
    response.data.forEach(item => {
      breakfast.push(item.breakfast)
      breakfast.forEach(item => { console.log(item)})
    })
    this.setState({
      breakfast: breakfast,
      dataSource: response.data,
    });
  }).catch((error) => {
    Toast.show({
      text: "[Error] Network Error, Please try again later",
      buttonText: "Okay",
      type: "danger",
      duration: 3000
    })
  });
}
weightData = ({item}) => {
  item.breakfast.forEach(
    item => {
      console.log(item)
      return (
        <ListItem>
          <Text>{item}</Text>
          <CheckBox style={{ marginLeft:210, alignSelf: 'flex-end'}} checked={false} color="#FC7B04" />
        </ListItem>
      )
    }
  );  
}
render() {
  return (
    <View style={styles.dietCard}>
      <FlatList
        inverted
        data={this.state.dataSource}
        renderItem={ this.weightData }
        keyExtractor={(item, index) => index}
      />
    </View>
  );
}

这是console.log（item）

的结果

3x Eggs
2x Bread
Cup of Milk

但是问题是屏幕上没有任何显示，我试图重新刺激物品，所以显示了3个物品，但是没有运气吗？有任何想法吗？如果我删除了foreach循环，则在同一listitem中得到了数组的3个元素，而不是我希望它们在单独的列表项中

Answer 1

使用下面的SectionList可以完全满足您的要求。

<SectionList
    sections={DATA}
    keyExtractor={(item, index) => item + index}
    renderItem={({ item }) => <Item title={item} />}
    renderSectionHeader={({ section: { title } }) => (
      // your renderUI view code is here..
    )}
  />

按照下面的链接获取更多详细信息。 https://facebook.github.io/react-native/docs/sectionlist

反应本机Flatlist嵌套循环

1 个答案: