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

【问题标题】：How to handle object and Array in react native?react native 如何处理对象和数组？
【发布时间】：2023-03-24 22:14:01
【问题描述】：

我正在积极地为我的大学学习创建一个 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>

                }) 
      }

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

【问题讨论】：

标签： javascript arrays reactjs react-native

【解决方案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 并获取值。