表示在FlatList或列表中的以下数据

Question

Hi我试图让下面的对象，我似乎不明白的平面列表中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

因此，这里是你展示重构对象的一种可能的方式代码示例。它会给你一个不折不扣把那像这样的数组。

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

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每一行都会被传递，看起来像上面的一个项目。然后，您可以呈现出来以自己的方式。

下面是创建一个简单FlatList试样成分。当你在每一行上点击它显示警报行的消息。

import React from 'react';
import { Text, View, StyleSheet, FlatList, SafeAreaView, TouchableOpacity } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
  }

  componentDidMount () {
    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",
      },
    }

    let result = []

    for (let key in obj) {
      let newObj = {}
      newObj.title = key
      newObj.msgs = []

      let messages = obj[key]

      for (let msg in messages) {
        let message = {}
        message.time = msg
        message.name = messages[msg]

        newObj.msgs.push(message)
      }
      result.push(newObj)
    }
    this.setState({data: result})
  }

  renderItem = ({item}) => {
    return (
      <TouchableOpacity 
        style={{height: 70, justifyContent: 'center', borderWidth: 0.5}}
        onPress={() => alert(JSON.stringify(item.msgs))}>
        <Text>{item.title}</Text>
      </TouchableOpacity>
    )
  }

  keyExtractor = (item, index) => index.toString();

  render() {
    return (
      <SafeAreaView style={styles.container}>
      <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
      />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  }
});

Answer 2

尝试你的对象转变成可以由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()，它会工作。

从这里你可以用这个结构来创建所需的组件和却告诉他们你请。