ListView正在删除错误的项目

时间:2017-04-04 23:25:36

标签: react-native

我这是一个可能重复的问题,但一切对我来说都是正确的。我的函数确实删除了一个项目,但删除了错误的项目。当我在console.log中检查对象数组时,我选择的项目不再存在。使用新对象,然后我设置状态。这是我的代码:

     export default class MainApp extends Component {
          constructor(props) {
            super(props);

            this.state = {
              damping: 1 - 0.6,
              tension: 400,
              dataBlob: [],
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
            };

          }

         componentDidMount() {

        fetch('http://54.152.253.14/barbershop/appointmentHelper.php')
        .then((response) => response.json())
        .then((responseData) => {
          this.state.dataBlob = responseData;
          this.setState({
              dataSource:this.state.dataSource.cloneWithRows(this.state.dataBlob),
              isLoading: false,
            });
        })
        .done();
      }

       deleteItem(rowId){
   console.log(rowId);
   this.state.dataBlob.splice(rowId,1);
   console.log(this.state.dataBlob);
   this.setState({
   dataSource: this.state.dataSource.cloneWithRows(this.state.dataBlob),
   })
  }
  fetchData() {

  }

  renderList = (dataObj,sectionID,rowId) => {

    return (
      <View style={styles.container}>

        <Row damping={this.state.damping} tension={this.state.tension} onPress={()=>this.deleteItem(rowId)}>
          <View style={styles.rowContent}>
            <View style={styles.rowIcon} />
            <View>
              <Text style={styles.rowTitle}>{dataObj.service}</Text>
              <Text style={styles.rowSubtitle}>Drag the row left and right</Text>
            </View>
          </View>
        </Row>



      </View>
    );
  };

  render() {
    return (
           <ListView
            dataSource={this.state.dataSource}
            renderRow={(data, sectionID, rowID) => this.renderList(data, sectionID, rowID)}
            style={styles.listView}

            />
           );
  }
}

任何帮助将不胜感激。我觉得我错过了关于列表视图的一些概念性想法,并且真的期待提高我的理解。感谢。

1 个答案:

答案 0 :(得分:0)

将渲染功能更改为此解决了我的问题:

jwplayer("video-container").setup({
  "file": "/example.mp4",
  "image": "/example.jpg",
  "width": "100%",
  "aspectratio": "16:10"
});

基本上,添加一个键来跟踪我的列表中的唯一项目是什么救了我。希望这将在未来为其他人提供帮助。