Question

我已经手动输入了与db.json相同的密钥，即使它显示了相同的错误

我尝试在db.json中手动添加唯一键，即使错误也以相同的方式反映出来。这段代码中有什么错误，所以我可以重写它。我无法确定是什么错误？

const styles = StyleSheet.create({
  list: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#A9A9A9'
  },

});

class EventList extends Component {
  state = {
    notes: []
  }
  componentDidMount() {
    const notes = require('./db.json').notes;
    this.setState({ notes });
  }

  render() {
    return [

      <FlatList
        key="flatlist"
        style={styles.list}
        data={this.state.notes}
        renderItem={({ item, seperators }) => (<EventCard notes={item} />)}
        keyExtractor={item => item.id}
      />,

      // <View style={{ flex: 1, backgroundColor: '#f3f3f3' }}>

        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => this.props.navigation.navigate('form')}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => console.log("Hi")}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#00FF00' title="Camera" onPress={() => { }}>
            <Icon name="md-camera" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      // </View>


    ];
  }

}
var style = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color:'#FF0000',
    opacity: 0,
  },
});


export default EventList;


          This is my  db.json file and I have written unique Id. I am getting a warning saying that each child should have a unique key. Here are my 2 files.



 {
        "events":[
            {
                "name":"chandu",
                "date":"15-06-2018 ",
                "content":"How are you..?",
                "id":"05dafc66-bd91-43a0-a752-4dc40f039144"
            },
            {
                "name":"bread",
                "date":"15-07-2018 ",
                "content":"I bought bread..?",
                "id":"05dafc66-bd91-43a0-a752-4dc40f039145"
            },
            {
                "name":"bharath",
                "date":"15-06-2018 ",
                "content":"I bought milk..?",
                "id":"05dafc66-bd91-43a0-a752-4dc40f039146"
            },
            {
                "name":"george",
                "date":"20-06-2018 ",
                "content":"I am eating",
                "id":"05dafc66-bd91-43a0-a752-4dc40f039147"
            },
            {
                "name":"michael",
                "date":"15-09-2018 ",
                "content":"I bought yogurt..?",
                "id":"05dafc66-bd91-43a0-a752-4dc40f039198"
            },
            {
                "name":"vick",
                "date":"15-04-2018 ",
                "content":"I bought milk..?",
                "id":"05dafc66-bd91-43a0-a752-4dc40f039157"
            },
            {
                "name":"shaun",
                "date":"09-06-2018 ",
                "content":"I bought milk..?",
                "id":"05dafc66-bd91-43a0-a752-4dc40f039120"
            }
        ]
    }

Answer 1

您在db.json中的项目应具有唯一值的'id'键，以用作FlatList项目的键，就像您在keyExtractor中编写的一样。

Answer 2

在FlatList中用此键Extractor替换
keyExtractor = {（item，index）=> index.toString（）}

数组或迭代器中的每个子代都应具有唯一的“键”道具

2 个答案: