Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

null is not an object evaluting this.rows[this.opencelld]._root

See original GitHub issue

react-native:“0.53.0” , react and native-base version:“^2.3.8”

Expected behaviour

      It should be delete row

Actual behaviour

whenever try to delete first row it throws 'null is not an object evaluting

this.rows[this.opencelld]._root’ error

safeCloseOpenRow

E://abc/proj/node_modules\native-base\dist\src\basic\List.js:57:13

Steps to reproduce (code snippet or screenshot)

add two or three items in swipable list using array
then delete from bottom
in the last delete first one
(it will throw above error)

<List style={{ width: width }}
                        dataSource={this.ds.cloneWithRows(this.state.expenseList)}
                        renderRow={data =>
                           <ListItem style={{ paddingTop: 10, paddingBottom: 10 }}>
                                <Body style={{ paddingLeft: 15, paddingRight: 15 }}>
                                    <Text style={{ color: '#009688', fontWeight: 'bold' }}>{data.item_name}</Text>
                                </Body>
                                <Right>
                                    <Text style={{ fontWeight: 'bold' }}>{data.expense_amount} </Text>
                                </Right>
                              
                            </ListItem>
                            }
                        renderLeftHiddenRow={(data, secId, rowId) =>
                            <Button full danger onPress={() => this.deleteExpense(data, secId, rowId)}>
                                <Text style={{ color: '#fafafa' }}>Delete</Text>
                            </Button>}
                       renderRightHiddenRow={(data, secId, rowId, rowMap) =>
                            <Button full onPress={() => this.editExpense(data, secId, rowId, rowMap)}>
                                <Text style={{ color: '#fafafa' }}>Edit</Text>
                            </Button>}
                        leftOpenValue={75}
                        rightOpenValue={-75}
                    />

delete function :

    deleteExpense = (data, secId, rowId) => {

    let arr = this.state.expenseList;

    let expenseId = data._id;

    console.log("row Id", rowId);

    let obj = {

        expenseId: expenseId

    }

    ExpenseProvider.deleteExpense(obj)

        .then(data => {
            if (data.success === true) {
                // eventObj.emit("updateExpense");
                arr.splice(rowId, 1);
                console.log("arr",JSON.stringify(arr));
                this.setState({ expenseList: arr });
            } else {
            }
        })
}

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

Any other additional info which would help us debug the issue quicker.

Issue Analytics

State:
Created 6 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

akhil-gacommented, Mar 21, 2018

@Arpan2912 tried a similar code. It is working fine.

Code

import React, { Component } from 'react';
import { ListView } from 'react-native';
import { Container, Header, Content, Button, Icon, List, ListItem, Text, Body, Right, Left } from 'native-base';
const datas = [
  { item_name: "item one", expense_amount: 100 },
  { item_name: "item two", expense_amount: 101 },
  { item_name: "item three", expense_amount: 102 },
  { item_name: "item four", expense_amount: 103 },
  { item_name: "item five", expense_amount: 104 }
];
export default class SwipeableListExample extends Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      expenseList: datas,
    };
  }

  deleteExpense(secId, rowId, rowMap) {
    rowMap[`${secId}${rowId}`].props.closeRow();
    const newData = [...this.state.expenseList];
    newData.splice(rowId, 1);
    this.setState({ expenseList: newData });
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <List style={{ width: 300 }}
            dataSource={this.ds.cloneWithRows(this.state.expenseList)}
            renderRow={data =>
              <ListItem style={{ paddingTop: 10, paddingBottom: 10 }}>
                <Body style={{ paddingLeft: 15, paddingRight: 15 }}>
                  <Text style={{ color: '#009688', fontWeight: 'bold' }}>{data.item_name}</Text>
                </Body>
                <Right>
                  <Text style={{ fontWeight: 'bold' }}>{data.expense_amount} </Text>
                </Right>

              </ListItem>
            }
            renderLeftHiddenRow={(data, secId, rowId, rowMap) =>
              <Button full danger onPress={() => this.deleteExpense(secId, rowId, rowMap)}>
                <Text style={{ color: '#fafafa' }}>Delete</Text>
              </Button>}
            renderRightHiddenRow={(data, secId, rowId, rowMap) =>
              <Button full onPress={() => this.editExpense(data, secId, rowId, rowMap)}>
                <Text style={{ color: '#fafafa' }}>Edit</Text>
              </Button>}
            leftOpenValue={75}
            rightOpenValue={-75}
          />
        </Content>
      </Container>
    );
  }
}

Gif

swipelist