React Native ListView dataSource allways null

Question

I have this piece of code

  componentWillMount() {
    return fetch("http://10.0.3.2:8080/all", {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        }
    })
        .then(response => response.json())
        .then(responseData => {
            this.ds = new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2
            });
            this.setState({
                dataSource: this.ds.cloneWithRows(responseData)
            });
        })
        .catch(error => {
            console.log("error : " + error);
        });
};

It brings me the data from my api, i already test it with console.log(this.state.dataSource) and the result was console.log result

But when i add the code

<ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData, navi) => this.renderEvent(rowData, this.props.nav)}
/>

I receive this error Error

Ryan Turnbull · Accepted Answer · 2017-10-29 01:17:00Z

1

Is this issue fixed by adding a simple constructor to your main component? I'd imagine you are getting this issue because you haven't received the data yet at the time of your initial render. Something like

class Test extends Component{
    constructor(props){
        super(props);

        this.state = {
            dataSource = [];
        }
   }

So when you have your ListView , atleast it will have something to pull from initially.

Hope this helps, but if not, have a look at this article , explains this concept further in depth.

answered Oct 29, 2017 at 1:17

Ryan Turnbull

3,9741 gold badge28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native ListView dataSource allways null

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related