React error with not fetched data. Ugly Code and null pointer. What to do?

Question

I have an React code that needs to fetch some data from an API, put it on a redux-store, and then render a List with this data. This is what Im doing

constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
    };
  }
  componentDidMount() {
    this.setState({ isLoading: true });
    this.loadData();
  }

  loadData = async () => {

    try {
       API.getList()
        .then(data => {
            this.updateState(data);
        })
        .then(data => this.setState({ isLoading: false }))
        .catch(function(error) {
          console.log(error.message);
        });
    } catch (e) {}
  };

  updateState = async (data) => {
    if (data != null) {
      await this.props.mainActions.receiveData(data);
    }
  };

  render() {
    const { isLoading  } = this.state;

    if (isLoading) {
      return <p>Loading ...</p>;
    }
    let items = [];
    if (this.props.items.data !== undefined) {
      items = this.props.items.data.stadiums;
    }
    return <MyList items={items} />;
  }
}

The problem is, the first time it renders, when I try to get "this.props.items" it is undefined yet.

So I need to put this ugly IF to dont break my code.

What will be a more elegant solution for this problem?

I'd say do what works and figure out "elegance" later (unless you're doing some anti-pattern) — Maximilian Burszley
– Maximilian Burszley, Commented Apr 24, 2018 at 19:09
Thanks buddy. It is working, but doesnt look like "The right way" to avoid null pointer in this case. What can I do to make it smooth on the lifecycle of the React. I guess this is my main question. — Fernando Maymone
– Fernando Maymone, Commented Apr 24, 2018 at 19:12

deowk · Accepted Answer · 2018-04-24 19:22:49Z

1

I am assuming the use of ES6 here:

I would set a defaultProp for items in the MyList component

export class MyList extends Component {
    ...
    static defaultProps = {
      items: []
    }
    ...
}

This way, if you pass items as undefined and mapping over items in your render method it will produce an empty array which is valid jsx

answered Apr 24, 2018 at 19:22

deowk

4,3181 gold badge27 silver badges34 bronze badges

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

Comments

Fernando Maymone · Accepted Answer · 2018-04-24 19:15:48Z

0

Ok. Just change the "componentDidMount" with "componentWillMount".

answered Apr 24, 2018 at 19:15

Fernando Maymone

7851 gold badge9 silver badges19 bronze badges

Comments

Farshad J · Accepted Answer · 2018-04-24 19:31:52Z

0

Jsx doesn't render undefined or null so you can include your condition in your return statement.

Instead of writing an if statement, do this:

return (
 {
   this.props.items.data &&
   this.props.items.data.stadiums &&
   <Mylist 
   items={this.props.items.data.stadiums}
    />
  }
);

answered Apr 24, 2018 at 19:31

Farshad J

1211 silver badge6 bronze badges

Collectives™ on Stack Overflow

React error with not fetched data. Ugly Code and null pointer. What to do?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related