Реагируйте на ошибку с неполными данными Гадкий код и нулевой указатель. Что делать?

Question

У меня есть код React, который должен извлечь некоторые данные из API, поместить их в хранилище с избыточностью и затем отобразить список с этими данными. Это то, что я делаю

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} />;
  }
}

Проблема в том, что при первом отображении, когда я пытаюсь получить «this.props.items», оно еще не определено.

Так что мне нужно поставить этот уродливый IF, чтобы не сломать мой код.

Что будет более элегантным решением этой проблемы?

Answer 1

Я предполагаю использование ES6 здесь:

Я бы установил defaultProp для элементов в компоненте MyList

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

Таким образом, если вы передадите элементы как undefined и отобразите элементы в вашем методе рендеринга, он создаст пустой массив, который является допустимым jsx

Answer 2

Jsx не отображает неопределенное или нулевое значение, поэтому вы можете включить свое условие в оператор возврата.

Вместо написания оператора if сделайте следующее:

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

Answer 3

Хорошо.Просто измените "componentDidMount" на "componentWillMount".