【问题标题】:React Native FlatList rendering only 1 objectReact Native FlatList 仅渲染 1 个对象
【发布时间】:2020-09-15 07:42:11
【问题描述】:

我一直在努力在 FlatList 中呈现这个对象。请有人可以帮助我。 FlatList 中有 2 个对象,但由于某种原因它只呈现 1 个对象

peopleArray

Const peopleArray = [
          "id": "U1600078348291",
          "People": [
            {
              "number": "4",
              "value": "Jack Sparrow",
            },
            {
              "number": "6",
              "value": "Daniel Roberts",
            },
          ],
        ]

我尝试了以下方法,但它不起作用

第一次尝试

<FlatList
      data={Object.keys(obj)}
      keyExtractor={(item, index) => item.index}
 />

第二次尝试

FlatList
      data={peopleArray}
      keyExtractor={(item) => item.id}
      renderItem={({item})=><Text>{item.index.key.value}</Text>}
/>

第三次尝试 这可行,但只显示两个对象中的一个

<FlatList
      data={peopleArray}
      keyExtractor={(item) => item.id}
      renderItem={({item})=>{<Text>{item[index].value}</Text>}}
/>

第四次尝试

<FlatList
      data={peopleArray}
      keyExtractor={(item) => item.id}
      renderItem={({item})=>{<Text>{item.value}</Text>}}
/>

我的代码:

const People = (props) => {
  const peopleArray = props.navigation.getParam('people')
  const renderPeople = ({item}) => {
    return <Text>{item[index].value}</Text>
  };
  return (
    <FlatList
      data={peopleArray}
      keyExtractor={(item) => item.id}
      renderItem={renderPeople}
    />
  );
};

【问题讨论】:

  • 您需要将数组直接传递给您的FlatList,所以可能类似于data={shoppingList.People}

标签: arrays react-native object react-native-android react-native-flatlist


【解决方案1】:

根据“我的代码”部分,您希望从“人员”中创建列表。 您的 FlatList 应该如下所示:

<FlatList
     data={peopleArray}
     keyExtractor={(item) => item.id}
     renderItem={renderPeople}
 />

renderPeople 像这样:

const renderPeople = ({item}) => (
           <View>
               {
                 item.People.map(person => <Text>{person.value}</Text>)
               }
           </View>
)

【讨论】:

  • 显示整个页面,我会告诉你如何让它工作
  • 您在平面列表数据“shoppingList”中设置。我在代码中没有看到名为“shoppingList”的变量,所以它不可能是全部
  • 嗨,这是我的错误,我输入了正确的 data 值,它应该是
  • 我也没有看到“peopleArray”
  • 它已经在那里了,我只是让它更清楚。现在去看看。谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-03-03
  • 1970-01-01
  • 2018-04-14
  • 2019-04-06
  • 1970-01-01
  • 2018-07-01
  • 1970-01-01
相关资源
最近更新 更多