Android 从ScrollView内的数组中删除子项总是删除最后一项

我有

我正在尝试删除

 class Thumb extends React.Component {
constructor(props){
  super(props);

  this.state = {
    show : false
  }
}


  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps,'nextprops')
    return false;
  }
  render() {
    return (
      <View style={[styles.button ]}>


            <View style={[{position:'relative'},styles.img]} >
              <View style={{position:'absolute'}}>
                <Image style={styles.img} source={{uri:this.props.uri.path}}/>
              </View>

              <View style={[styles.img , {position:'absolute',alignItems:'center',justifyContent:'center',opacity:1}]}>

              <TouchableHighlight onPress = {() => {this.props.onDelete(this.props))}}>
                <Icon name="close" size = {30} color="white"/>
                 </TouchableHighlight>
              </View>
            </View>

      </View>
    );
  }
}

我应该如何做到这一点

我尝试删除相应的状态图像对象，但它总是删除ScrollView（或最后一个Thumb组件）的最后一个图像

---

我是一个新的反应本机和安卓我不知道这是可能与ScrollView。请告诉我正确的方法。

这是一个很常见的问题，混淆了

键在组件中的作用。我们认为键只是动态生成的组件的唯一标识符。但它也可以作为React了解哪些组件需要重新绘制的手段

因此，我建议您将
键更改为图像本身特有的内容，而不是位置

deleteImage(deleteProp){
//  console.log(_scrollView)
//  _scrollView.props.children.splice(deleteProp.number,1)
//  console.log(_scrollView)
  console.log(deleteProp,'prop from delete method');
   console.log(this.state.images ,'before')
 let images = this.state.images;
 console.log(images.splice(deleteProp.number ,1),'splice data');
  this.setState({images : images});
 console.log(this.state.images,'after')
  if(this.state.images.length == 0 ){
    this.setState({loading:false})
  }
}

这样，当您想要删除时，只需调用
this.props.onDelete（）
。这只是一个偏好，但我认为它更干净。
这是一个相当常见的问题，混淆了
键在组件中的作用。我们认为键只是动态生成的组件的唯一标识符。但它也可以作为React了解哪些组件需要重新绘制的手段

因此，我建议您将
键更改为图像本身特有的内容，而不是位置

deleteImage(deleteProp){
//  console.log(_scrollView)
//  _scrollView.props.children.splice(deleteProp.number,1)
//  console.log(_scrollView)
  console.log(deleteProp,'prop from delete method');
   console.log(this.state.images ,'before')
 let images = this.state.images;
 console.log(images.splice(deleteProp.number ,1),'splice data');
  this.setState({images : images});
 console.log(this.state.images,'after')
  if(this.state.images.length == 0 ){
    this.setState({loading:false})
  }
}

这样，当您想要删除时，只需调用
this.props.onDelete（）
。只是一种偏好，但我认为它更干净。
拇指：

// original component
<Thumb key={i} number={i} uri={uri} onDelete={this.deleteImage.bind(this)} />
// updated function by adding index to bind params and unique key
<Thumb key={uri.path} number={i} uri={uri} onDelete={this.deleteImage.bind(this,i)} />

拇指：

// original component
<Thumb key={i} number={i} uri={uri} onDelete={this.deleteImage.bind(this)} />
// updated function by adding index to bind params and unique key
<Thumb key={uri.path} number={i} uri={uri} onDelete={this.deleteImage.bind(this,i)} />

您可以发布代码以从state.images中删除条目吗？通常，您希望传递要删除的项目的索引/id，如
this.deleteImage.bind（this，i）
，以便您知道要删除的项目。@fabio.sussetto我正在传递要删除项目的索引image@fabio.sussetto让images=this.state.images；图像拼接（删除项目编号，1）；this.setState（{images:images}）；有几件事：1）
splice
在适当的位置改变this.state.images的内容。在React中，永远不要直接改变状态，而是使用Array#slice。2） 你最近怎么样？如果可以的话，请发布完整的组件类，这样我们可以看到发生了什么。@fabio.sussetto我已经更新了代码…您可以发布代码从state.images中删除条目吗？通常，您希望传递要删除的项目的索引/id，如
this.deleteImage.bind（this，i）
，以便您知道要删除的项目。@fabio.sussetto我正在传递要删除项目的索引image@fabio.sussetto让images=this.state.images；图像拼接（删除项目编号，1）；this.setState（{images:images}）；有几件事：1）
splice
在适当的位置改变this.state.images的内容。在React中，永远不要直接改变状态，而是使用Array#slice。2） 你最近怎么样？如果可以，请发布完整的组件类，这样我们就可以看到发生了什么。@fabio.sussetto我已经更新了代码。。。
class Thumb extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            show : false
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log(nextProps,'nextprops')
        return false;
    }

    render() {
        return (
            <View style={[styles.button ]}>
                <View style={[{position:'relative'},styles.img]} >
                    <View style={{position:'absolute'}}>
                        <Image style={styles.img} source={{uri:this.props.uri.path}}/>
                    </View>
                    <View style={[styles.img , {position:'absolute',alignItems:'center',justifyContent:'center',opacity:1}]}>
                        <TouchableHighlight onPress = {this.props.onDelete}>
                            <Icon name="close" size = {30} color="white"/>
                        </TouchableHighlight>
                    </View>
                </View>
            </View>
        );
    }
}

<ScrollView horizontal={true} >
    {this.state.images.map((uri,index) => 
    <Thumb key={index} uri={uri} onDelete={this.deleteImage.bind(this, index)}/> )}
</ScrollView>

deleteImage(index) {
    const images = this.state.images;
    const newImages = [...images.slice(0, index), ...images.slice(index + 1, images.length)];
    let newState = { images: newImages };

    if(images.length === 0){
        newState = { ...newState, loading: false };
    }

    this.setState(newState);
}