TypeError: невозможно прочитать свойство null в компоненте React

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

import React, { Component } from 'react';
import Select from 'react-select';
class selectDemo extends Component {
state = { 
    selectedOption: '',
    data: [
        {Model: 'Option1'},
        {Model: 'Option2'},
    ],
 }

//Handler for Select Drop Down
handleChangeEvent = (selectedOption) => {
    this.setState({selectedOption}, ()=>console.info(this.state.selectedOption.Model));
}

RenderButton = () => {           
        return <button type = "button" className = "btn btn-primary">{this.state.selectedOption.Model}</button>
}

render() {
    console.info(this.state.selectedOption);
    const { selectedOption } = this.state;
    const value = selectedOption && selectedOption.Model;
    return (
        <div>
            <div name = "selectedOption" className = "section">
                <Select
                    className='form-control'
                    placeholder='Select Option'
                    name = "selectedOption"
                    value = {value}
                    onChange = {this.handleChangeEvent}
                    labelKey='Model'
                    valueKey='Model'
                    optionClassName='dropdown-item'
                    options = {this.state.data}
                />
            </div>
            <div className = "section">
               {this.state.selectedOption.Model && <this.RenderButton/>}
            </div>
        </div>
    );
}
}
export default selectDemo;

Однако, если я очищу значение, т.е. не выбирая другой, а щелкая x, чтобы удалить свой выбор, я получаю

TypeError: Cannot read property 'Model' of null

Ошибка ровно в строке 54, где я фактически проверяю, является ли значение «нулевым» или «неопределенным». Я попробовал с заявлениями typeof, if и switch после прочтения:

но это тоже не работает.

Где именно кидает ошибку? В вашем коде нет строки 54.

Simon 26.07.2018 10:13

Извините, да, я упростил код, чтобы разместить его здесь, и в моем исходном компоненте это была строка 54, теперь она на самом деле здесь {this.state.selectedOption.Model && <this.RenderButton/>}

Sebs030 26.07.2018 10:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
10 033
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Что вам нужно сделать, так это предоставить проверку перед доступом к Model, поскольку, когда вы отмените выбор параметра, selectedOption становится нулевым, и вы не можете получить доступ к свойству из него.

 <div className = "section">
       {this.state.selectedOption && this.state.selectedOption.Model && <this.RenderButton/>}
 </div>

Да, спасибо, что это была проблема, я смотрел только на «this.state.selectedOption.Model», так как это вызывало ошибку

Sebs030 26.07.2018 10:37

Кажется, что ошибка происходит из вашей строки:

{this.state.selectedOption.Model && <this.RenderButton/>}

Это будет работать, если selectedOption имеет истинное значение. Однако, если имеет значение null, читать от него Model не имеет смысла. Таким образом, вам необходимо сначала проверить, является ли selectedOption правдивым, прежде чем проверять Model.

Вы уже делаете это в начале метода render():

const value = selectedOption && selectedOption.Model;

Итак, вы могли:

{value && <this.RenderButton/>}

В качестве альтернативы, вот изящный способ решить эту проблему, особенно если свойство многоуровневое:

(selectedOption || {}).Modal && <this.RenderButton/>

Это означает, что если selectedOption является ложным, вы можете создать временный объект {}, чтобы вы может пытались прочитать Modal из него без получения ошибки.

Большое спасибо, этот ответ тоже правильный и хорошая альтернатива для решения проблемы.

Sebs030 26.07.2018 10:38

Другие вопросы по теме