Question

嗨，我正在尝试为以下对象创建一个平面列表，我似乎不明白renderItem的工作原理，因为我的键在FlatList中是唯一的。我尝试过并得到Tried to get frame four out of range index NaN基本上需要第一个对象作为onPress可以向我显示子对象的标题

this.setState({objToDisplay: parsedObj});

// parsedOgj is here 
Object {
   "Mike Smith": Object {
   "1534555555": "Helena",
  },
  "Jack": Object {
     "1553555897": "Cris",
  },
  "mrs bond": Object {
    "10101": "Test Expo",
    "8210": "Tester",
  },
  "test": Object {
    "2222": "Test Expo 2",
    "3333": "Test Expo 3",
  },
}
 <FlatList
      style={styles.list}
      data={this.state.objToDisplay}
      renderItem={({item}) =>()} // would to have Test and then arrow to see the sub object 
    />

Answer 1

尝试将您的对象转换为FlatList组件可以读取的数组，然后使用renderItem属性传递一个将返回列表组件的函数。

下面是一个示例，该示例将对象转换为数组并将键显示为名称：

obj = {
    'Mike Smith': {
      1534555555: 'Helena',
    },
    Jack: {
      1553555897: 'Cris',
    },
    'mrs bond': {
      10101: 'Test Expo',
      8210: 'Tester',
    },
    test: {
      2222: 'Test Expo 2',
      3333: 'Test Expo 3',
    },
  };

  data = Object.keys(this.obj).map(key => ({
    name: key,
    values: { ...this.obj[key] },
  }));

render() {
    return (
      <FlatList
      data={this.data}
      keyExtractor={item => item.name}
      renderItem={({ item }) => {
        return (
        <View>
          <Text>Name: {item.name}</Text>
        </View>
        );
      }}
      />
    );
  }

在此示例中，您的数据将最终如下所示：

this.data Array [
   Object {
     "name": "Mike Smith",
     "values": Object {
       "1534555555": "Helena",
     },
   },
   Object {
     "name": "Jack",
     "values": Object {
       "1553555897": "Cris",
     },
   },
   Object {
     "name": "mrs bond",
     "values": Object {
       "10101": "Test Expo",
       "8210": "Tester",
     },
   },
   Object {
     "name": "test",
     "values": Object {
       "2222": "Test Expo 2",
       "3333": "Test Expo 3",
     },
   },
 ]
 item Object {
   "name": "Mike Smith",
   "values": Object {
     "1534555555": "Helena",
   },
 }
 item Object {
   "name": "Jack",
   "values": Object {
     "1553555897": "Cris",
   },
 }
 item Object {
   "name": "mrs bond",
   "values": Object {
     "10101": "Test Expo",
     "8210": "Tester",
   },
 }
 item Object {
   "name": "test",
   "values": Object {
     "2222": "Test Expo 2",
     "3333": "Test Expo 3",
   },
 }

如果您希望将values键作为数组，只需将散布运算符更改为另一个map()，它将起作用。

您可以在此处使用此结构创建所需的组件，并根据需要显示它们。

Answer 2

因此，这是一个代码示例，向您显示一种重构对象的可能方法。它将为您提供一个像这样的数组的输出。

public interface RetrofitApi {

    @GET("bins/xdfi8")
    Observable<List<Image>> getImage();

    @GET
    Observable<Response<ResponseBody>> getImage(@Url String url);
}

[
  {
    title: 'Mike Smith',
    msgs: [{time: '1534555555', name: 'Helena'}]
  }
]

在将对象添加到状态之前，我将对其进行任何重构。

FlatList中的每一行都将传递一个类似于上面的项目。然后，您可以按照自己的方式进行渲染。

这里是创建简单FlatList的示例组件。当您点击每一行时，它会在警报中显示该行的消息。

let obj = {
  "Mike Smith": {
  "1534555555": "Helena",
  },
  "Jack":  {
    "1553555897": "Cris",
  },
  "mrs bond":  {
    "10101": "Test Expo",
    "8210": "Tester",
  },
  "test":  {
    "2222": "Test Expo 2",
    "3333": "Test Expo 3",
  },
}

// create an array to hold the result, this is what you will eventually save to state
let result = []

// loop over each key in the main object
for (let key in obj) {
  // create a new object with the properties of title and msgs
  let newObj = {}
  newObj.title = key
  newObj.msgs = []

  // get the messages that are in the object
  let messages = obj[key]
  
  // loop over the messages and convert them into their own object with time and name properties
  for (let msg in messages) {
    let message = {}
    message.time = msg
    message.name = messages[msg]

    // push the new messages objects into an array
    newObj.msgs.push(message)
  }
  result.push(newObj)
}

// log out the result so you can see what has been constructed
// ideally you will want to save it to state at this point. 
console.log(JSON.stringify(result))

在FlatList或List中表示以下数据

2 个答案: