Uncaught TypeError: Невозможно прочитать свойство 'name' из null.Возврат только истинных значений

Question

Относится к URL https://app.com/api/v1/$ {id}.В зависимости от id, API возвращает мне ответ -> null или {name: 'a'}.У объекта есть свойство name.Свойство name хочет установить состояние:

this.setState ({
    load: this.props.active ['name']
});

Когда я нажимаю на элементы, обладающие свойством name, они отображаются в консоли.Когда я иду к элементу, который возвращает «ноль» без свойства «имя».У меня ошибка: Uncaught TypeError: Can not read property 'name' of null

class Details extends Component {
    constructor() {
        super();

        this.state = {
            load: null
        }
    }

  componentDidUpdate(prevProps, prevState) { 
        if(prevProps.active !== this.props.active) {
                this.setState({
                    load: this.props.active['name']
                });
        }
    }

  render () {

    return (
      <div >

      </div>
    )
  } 

Моя цель - вернуть только ответ true.

Что-то похожее на это:

componentDidUpdate(prevProps, prevState) { 

    if (prevProps.active !== this.props.active) {
      let solution = null;
        if(this.props.active) {
          return solution = this.props.active["name"]
        }
        this.setState({
          load: solution
        });
      }

  }

Answer 1

В вашем случае использования вы можете проверить внутри компонента, существует ли this.props.active, поэтому внутри render ...

if (this.props.active) {
  return (
    <div>Your cool detail view with name attribute.</div>
  );
} else {
  return (
    <div>Your empty detail view.</div>
  );
}

Но если эти подробные представления являются частью какого-либо вида списка или коллекции, вы можете просто пропустить компоненты рендеринга для нулевых значений. В этом случае в вышестоящем компоненте вы должны отфильтровать массив объектов (, как описано здесь, например, ), а затем визуализировать вашу коллекцию с отфильтрованным массивом.

Answer 2

Вы можете просто добавить его в качестве другого условия в вашем операторе if

if(prevProps.active !== this.props.active && this.props.active !== null) {