Javascript 单击按钮时，React Native会添加新数据

我是个新手，不熟悉本地语言，也不熟悉javascript。我的代码有一个问题，我似乎无法找到错误所在

我的应用程序有一个用户可以添加和保存车牌号。问题是每次我保存盘子，或者单击“添加”按钮，或者只是简单地单击已经保存的盘子，它都会复制自己

这是我的代码

export default class plakaco extends Component {
    constructor(){
        super()
        this.state = {
            plates: [
                {plateNumber: '', status: '', id: 1},


            ]
        }
        this.getPlateId = this.getPlateId.bind(this);
    }
    componentWillReceiveProps(nextProps) {
        let newArr = this.state.plates.slice(0);
        let idPlate =  this.state.plates[this.state.plates.length - 1];
        let newId = idPlate.id + 1
        newArr.push({plateNumber: nextProps.pn, status: 'Saved', id: newId})
        this.setState({
            plates: newArr
        })
    }
     componentDidMount() {
        AsyncStorage.getItem("id").then(val => {
            this.setState({
              "id": val
            })
            fetch(`http://aaa.com/api/getClientPlates/${val}`, {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            }).then(response => {
                response.json().then(data => {
                    console.log(data)
                })
            })
        }).done()
    }
  getPlateId(i, plateNumber, inputEditable){
        this.props.getValues(plateNumber, inputEditable, false, false);
  }

    addAPlate(){
        this.props.getValues('', true, true, true);
    }

  render() {
    return (
            <View style={styles.leftView}>
                <Button
                    onPress={this.addAPlate.bind(this)} 
                    title="ADD"
                    color="#343434"
                    accessibilityLabel="Add a plate."
                />
                <PlateItems plates={this.state.plates} getPlateId={this.getPlateId}/>
            </View>
    );
  }
}

const styles = StyleSheet.create({
  leftView: {
    flex: 1,
    backgroundColor: '#F1F1F1'
  }
});

导出默认类plakaco扩展组件{
构造函数（）{
超级（）
此.state={
车牌：[
{plateNumber:''，状态：''，id:1}，
]
}
this.getPlateId=this.getPlateId.bind（this）；
}
组件将接收道具（下一步）{
设newArr=this.state.plates.slice（0）；
让idPlate=this.state.plates[this.state.plates.length-1]；
设newId=idPlate.id+1
newArr.push（{plateNumber:nextrops.pn，状态：'Saved'，id:newId}）
这是我的国家({
车牌：纽瓦尔
})
}
componentDidMount（）{
AsyncStorage.getItem（“id”）。然后（val=>{
这是我的国家({
“id”：val
})
取回(`http://aaa.com/api/getClientPlates/${val}`{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（{}）
})。然后（响应=>{
response.json（）.then（数据=>{
console.log（数据）
})
})
}).完成
}
getPlateId（i，plateNumber，可输入）{
this.props.getValues（plateNumber、可输入、false、false）；
}
addAPlate（）{
this.props.getValues（“”，true，true，true）；
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
左视图：{
弹性：1，
背景颜色：“#f1f1”
}
});

这是我点击一个盘子的代码，它一次又一次地添加同一个盘子

_onPress(i){
        this.props.plates.filter((val) => {
            if(val.id === i){
                this.props.getPlateId(i, val.plateNumber, false, false);
            }
        });
    }
  render() {
      const listItems = this.props.plates.map((item) => 
        <TouchableOpacity onPress={this._onPress.bind(this, item.id)} key={item.id}>
            <View style={styles.lists} >
                <Text style={styles.itemText1}>{item.plateNumber}</Text>
                <Text style={styles.itemText2}>{item.status}</Text>
            </View>
        </TouchableOpacity>
      );

\u onPress（一）{
此.props.plates.filter（（val）=>{
如果（val.id==i）{
this.props.getPlateId（i，val.plateNumber，false，false）；
}
});
}
render（）{
const listItems=this.props.plates.map（（项目）=>
{项目编号}
{item.status}
);

---

非常感谢！

在理解了代码之后，我想出了一个解决方案，该解决方案中的错误可能在

组件将接收props

中，请更改

this.state.plates[this.state.plates.length - 1];

to 

newArr[newArr.length - 1];

---

干杯：）

还是一样，先生。当我点击一个现有的盘子时，它会复制。当你的物品.id是唯一的，那么就不需要使用过滤器。使用indexOfwhat？@Codesingh