У меня есть компонент 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, теперь она на самом деле здесь {this.state.selectedOption.Model && <this.RenderButton/>}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Что вам нужно сделать, так это предоставить проверку перед доступом к Model, поскольку, когда вы отмените выбор параметра, selectedOption становится нулевым, и вы не можете получить доступ к свойству из него.
<div className = "section">
{this.state.selectedOption && this.state.selectedOption.Model && <this.RenderButton/>}
</div>
Да, спасибо, что это была проблема, я смотрел только на «this.state.selectedOption.Model», так как это вызывало ошибку
Кажется, что ошибка происходит из вашей строки:
{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 из него без получения ошибки.
Большое спасибо, этот ответ тоже правильный и хорошая альтернатива для решения проблемы.
Где именно кидает ошибку? В вашем коде нет строки 54.