在react native中显示来自API数据的节列表

gwo2fgha 于 2022-11-17 发布在 React

关注(0)|答案(1)|浏览(119)

我正在尝试从API接收的数据创建一个SectionList。此API具有以下结构，用于显示我想要显示的成分：

const ingredients = {
    malt: [
      {
        name: 'Maris Otter Extra Pale',
        amount: {
          value: 3.3,
          unit: 'kilograms',
        },
      },
      {
        name: 'Caramalt',
        amount: {
          value: 0.2,
          unit: 'kilograms',
        },
      },
      {
        name: 'Munich',
        amount: {
          value: 0.4,
          unit: 'kilograms',
        },
      },
    ],
    hops: [
      {
        name: 'Fuggles',
        amount: {
          value: 25,
          unit: 'grams',
        },
        add: 'start',
        attribute: 'bitter',
      },
      {
        name: 'First Gold',
        amount: {
          value: 25,
          unit: 'grams',
        },
        add: 'start',
        attribute: 'bitter',
      },
      {
        name: 'Fuggles',
        amount: {
          value: 37.5,
          unit: 'grams',
        },
        add: 'middle',
        attribute: 'flavour',
      },
      {
        name: 'First Gold',
        amount: {
          value: 37.5,
          unit: 'grams',
        },
        add: 'middle',
        attribute: 'flavour',
      },
      {
        name: 'Cascade',
        amount: {
          value: 37.5,
          unit: 'grams',
        },
        add: 'end',
        attribute: 'flavour',
      },
    ],
    yeast: 'Wyeast 1056 - American Ale™',
  };

使用SectionList（以麦芽和啤酒花作为节标题）得到的预期结果如下：
Visual example of result
我已经尝试过使用Object.values（）这样的函数，但没有任何结果。代码如下所示，接收来自上一个视图的啤酒（带有啤酒列表）：

const Detail = ({ route }) => {
  const beer = route.params.beer;
  const ingredientsFormatted = Object.values(beer.ingredients);
  return(
  <SectionList
    sections={ingredientsFormatted}
    renderItem={({ item }) => {
          <Text>{item.name}</Text>; //Here there has to be the name of the different ingredients
        }}
        renderSectionHeader={({ section }) => <Text>{section}</Text>} //Here there has to be malt, hops or yeast
        keyExtractor={(item) => item.name}
      ></SectionList>
)}

react-native

来源：https://stackoverflow.com/questions/74421760/display-sectionlist-from-api-data-in-react-native

1条答案

按热度按时间

8yoxcaq71#

您的ingredients数据中有2个问题。

yeast的值格式与其他值不同。
1.插入到SectionList中的数据不是React-Native Offical docs建议的格式。
要解决此问题，您可以修改API返回/Map从服务器检索后的数据。

const Detail = ({ route }) => {
  const beer = route.params.beer;
  let sectionListTemplate = [];

  for (let [key, value] of Object.entries(beer.ingredients)) {
    //console.log(`${key}: ${JSON.stringify(value)}`);

    if(!Array.isArray(value)){
      //Handle case for 'yeast' which its data is not an array
      sectionListTemplate.push({
        title: key,
        data: [{
          name: value
        }]
      })
    }
    else{
      //Map value for general cases
      sectionListTemplate.push({
        title: key,
        data: value
      })
    }
  }

  return(
    <SectionList
      sections={sectionListTemplate}
      renderSectionHeader={({ section }) => {
        return(
          //Here there has to be malt, hops or yeast
          <Text style={{fontWeight: 'bold'}}> 
            {section.title}
          </Text>
        )
      }} 
      renderItem={({ item }) => {
        return(
          //Here there has to be the name of the different ingredients
          <Text>
            {item.name}
          </Text> 
        )
      }}
      keyExtractor={(item) => item.name}
    >
    </SectionList>
  )
)}

赞(0）回复(0）举报 2022-11-17

我来回答

在react native中显示来自API数据的节列表

1条答案

相关问题

热门标签

最新问答