时间戳

首页 > 解决方案 > 我如何使用平面列表返回对象列表？

javascript - 我如何使用平面列表返回对象列表？

问题描述

我是学习 react-native 的新手，我正在尝试获取一个 API，该 API 将返回对象列表。

我设置使用状态如下所示

const [DATA, setDATA] = useState([])

我将获取一个 API 并从服务器获取数据并将它们放入数据属性中。

const discountdetail = ()=> {
    fetch(`https://example/discount` ,{
      method: "GET",
      headers: {Authorization: localStorage.getItem('tokenType')+ ' ' +localStorage.getItem('token')}})
      .then(res=>res.json())
      .then(res=>{
          setDATA(res)
          console.log(item)
        })
      })
    }
    
return(


      .....
      .....

      <FlatList
        data={DATA}
        renderItem={({item})=>{
          <View style={styles.item}>
            <Text style={styles.title}>{item.name}</Text>
          </View>
        }}
        keyExtractor={(item, index) => index.toString()}        
        // extraData={selectedId}
        style={{marginVertical: 25,}}
      />  
)

[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]
[{"id": 1, "name": "ham burger", "value": "30%"}, {"id": 2, "name": "Cheese burger", "value": "50%"}]

它进入一个无限循环。似乎我需要使用异步方法，但我很难实现它。请给我一个提示来解决它。

标签： javascriptreact-native

解决方案

您需要在每个地图迭代中将对象添加到您的DATA数组中。所以你可以使用扩展运算符或 unshift()。对于这个例子，我更喜欢扩展运算符。

const discountdetail = ()=> {
    fetch(`https://example/discount` ,{
      method: "GET",
      headers: {Authorization: localStorage.getItem('tokenType')+ ' ' +localStorage.getItem('token')}})
      .then(res=>res.json())
      .then(res=>{
        res.map(function(item){
          setDATA([{name: item.name,value: item.value,}, ...DATA])
          console.log(item)
        })
      })
      console.log("data after map:" ,DATA);

    }

推荐阅读