如何在React Native中解析一个对象数组，并从中创建一个新数组

Question

我正处于试图从图像库中解析一系列对象的初学者阶段，我经历了多个解决方案，但遇到了各种错误。

以下是我选择图像后获得的JSON。

[
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-cefaffca-0fad-4b1a-aae5-1e7393a5da3f.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-d6052c1f-c075-47dc-a759-ff99d4d082a8.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-73537151-5f6c-4ece-9ee8-9e018b243ace.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:1048858,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-8ff9fe38-8050-447e-aea8-64976672fbef.jpg'
   }
]

我一直在尝试的解决方案是从以下链接中。

如何更新反应本机中的数组状态？

我尝试过的解决方案是

    let markers = [...this.state.markers];
let index = markers.findIndex(el => el.name === 'name');
markers[index] = {...markers[index], key: value};
this.setState({ markers });

我没有得到的是他们获得值变量的位置。我需要从"路径"键中创建一个数组。以下是我的代码

 constructor(props){
    super(props);
    this.ShowPicker = this.ShowPicker.bind(this);
    this.createModal = this.createModal.bind(this);
    this.state = {date:"06/07/1988",valueInTens:0,valueInUnits:0,valueInFeet:0,valueInInches:0,checkedForKids:false,checkedForDrink:false,checkedForSmoke:false,filePath: {},dataForMaritalStatus:"",showSlider:false,language:"English"
  ,isModalVisible:false,checked:false,mImages:[] };
  }

我打开Picker库的方法

chooseFile = () => {
    var options = {
      title: 'Select Image',
      customButtons: [
        { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
      ],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.openPicker({
  multiple: true
}).then(images => {
-> images // I need to create array out of this object

//  let markers = [...this.state.mImages];
// let index = markers.findIndex(images => images.name === 'path');
// markers[index] = {...markers[index], key: value};
// this.setState({ markers });
// let newMarkers = mImages.map(el => (
//       el.name==='name'? {...el, key: value}: el
// ))
//this.setState({ markers });
this.setState((mImages:images);
  console.log(images);
});

这是我需要屁股图像

的地方

<Gallery
    style={{height:200,width:300, flex: 1, backgroundColor: 'white' }}
    // images={[
    // ]}
  /> 

Answer 1

let pathArray = markers.map(function(item){return item.path;});

patharray是arraylist

Answer 2

arr = [
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-cefaffca-0fad-4b1a-aae5-1e7393a5da3f.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-d6052c1f-c075-47dc-a759-ff99d4d082a8.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-73537151-5f6c-4ece-9ee8-9e018b243ace.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:1048858,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-8ff9fe38-8050-447e-aea8-64976672fbef.jpg'
   }
]
    var pathArr = [];
    arr.map((item) => {
        pathArr.push(item.path)
    })

patharr是您需要创建

Answer 3

如果您想要一个新数组，而数组中的每个项目中只有一个路径变量，则应使用.map函数。

...
}).then(images => {
  const mImages = images.map(image => image.path);
  this.setState({mImages});
}

这将导致以下内容：

['http://foo.bar', 'http://bar.foo', ....]