react native 如何处理对象和数组？

Posted 2023-02-22

【中文标题】react native 如何处理对象和数组？

【英文标题】：How to handle object and Array in react native?

【发布时间】：2021-03-30 22:02:50

【问题描述】：

我正在积极地为我的大学学习创建一个 React Native 应用程序！在那使用外部api作为数据源。面临的问题是有时以单个对象获取数据，有时以数组格式获取数据。如何以 react native 的角度处理这个问题？

在映射 jsx 时将其视为数组，但是当我获取对象时会抛出错误

My data example:

const data =          // this is example of single object 
   entry: 
      key: "0",
      value: "Patrik"
   


const data =          // this is example of array
   entry: [
   
      key: "0",
      value: "Patrik"
   ,
    
      key: "1",
      value: "John"
   ],

这就是我从外部 api 获取数据的方式，现在我的反应原生 jsx 代码：

      data.entry.map(o => 
               <View key=o.key>
                      <View style= paddingLeft: 25 >
                            <Text style= fontWeight: 'bold' >o.value</Text>
                      </View>
                  </View>

                ) 
      

所以，当我得到数组时，它可以工作，但是当我得到对象时，这会引发错误！有什么帮助吗？

【参考方案1】：

//jsx

const convertedData =  Object.values(Array.isArray(data.entry)? data.entry: [data.entry]);

现在您可以迭代 convertData 。但我建议不要使用 map ，而是使用 Flatlist。 如果您想使用地图，请对 data.entry 进行空检查并返回 jsx 元素。

【讨论】：

用 flatlist 代替 map 有什么好处？

.Quick Rendering .good Performance .Header support .Footer support .Pull to refresh support .Separator support .Scroll loading support .ScrollToIndex support .Cross-Platform support .Configurable callbacks .可选支持水平模式

我相信使用地图和平面之间不会有任何性能问题

【参考方案2】：

这可能会有所帮助 -- （已更新）

  const newData = []; // define empty array
  Array.isArray(data.entry) ? newData.concat(data.entry) : 
                              newData.push(data.entry);
    newData.entry.map((o) => 
      <View key=o.key>
        <View style= paddingLeft: 25 >
          <Text style= fontWeight: "bold" >o.value</Text>
        </View>
      </View>;
    )

【讨论】：

我明白这一点，但这是解决这个问题的真正方法吗？因为它扩展了代码的长度对吗？

@PatriciaD19 最好先将值设置为 map over，这样您就不必复制粘贴 all JSX。例如dataToRender = Array.isArray(data.entry) ? data.entry : [data.entry];。然后继续知道它是一个数组 data.entry.map... 并且您不必为这两种情况复制/粘贴 JSX

@PatriciaD19 检查更新的代码以减少代码行数

【参考方案3】：

将对象转换为数组，以免出错。

if(!Array.isArray(data.entry))
  data =  entry: [data.entry] ;

【讨论】：

[data] 或 [data.entry]?

如果是，如何渲染jsx？

更新了答案。这是我的错。你不需要改变你的 jsx。

【参考方案4】：

就像上面的评论所说，你应该使用Array.isArray 来检查数据是否是一个数组。如果它是一个像这样的对象应该可以工作：

let element = null
if(Array.isArray(data.entry))
  element = data.entry.map(o => 
     <View key=o.key>
        <View style= paddingLeft: 25 >
          <Text style= fontWeight: 'bold' >o.value</Text>
        </View>
     </View>
   ) 
  
  else
    element = (
    <View key=data.entry.key>
        <View style= paddingLeft: 25 >
          <Text style= fontWeight: 'bold' >data.entry.value</Text>
        </View>
    </View>
  )

【参考方案5】：

您应该使用Array.isArray(data.entry) 来检查您是否有一个对象数组或单个对象。并据此执行逻辑。

【讨论】：

那么，如果它的对象如何渲染jsx呢？

如果它是一个单一的对象，你可以只做data.entry.value 并获取值。