Javascript TypeError:无法读取React组件中null的属性

我有一个React-Select组件，它呈现一个下拉菜单，当从下拉菜单中选择一个项目时，就会呈现一个按钮get

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
handleChange = (selectedOption) => {
    this.setState({selectedOption}, ()=>console.log(this.state.selectedOption.Model));
}

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

render() {
    console.log(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.handleChange}
                    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;

import React，{Component}来自'React'；
从“反应选择”导入选择；
类selectDemo扩展组件{
状态={
已选择选项：“”，
数据：[
{Model:'Option1'}，
{Model:'Option2'}，
],
}
//选择下拉列表的处理程序
handleChange=（selectedOption）=>{
this.setState（{selectedOption}，（）=>console.log（this.state.selectedOption.Model））；
}
RenderButton=（）=>{
返回{this.state.selectedOption.Model}
}
render（）{
console.log（this.state.selectedOption）；
const{selectedOption}=this.state；
const value=selectedOption&&selectedOption.Model；
返回(
{this.state.selectedOption.Model&&}
);
}
}
导出默认selectDemo；

但是，如果我清除该值，即不选择另一个值，而是单击x以删除我的选择，则会得到一个

TypeError:无法读取null的属性“Model”

错误正好出现在第54行，我正在检查值是“null”还是“undefined”。阅读以下内容后，我尝试了

typeof

、

if

和

switch

状态元素：

---

但这并不奏效

您需要做的是在访问

Model

之前提供一个检查，因为当您取消选择一个选项时，

selectedOption

将变为null，并且您无法从中访问属性

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

{this.state.selectedOption&&this.state.selectedOption.Model&&}

您需要做的是在访问

模型之前提供一个检查，因为当您取消选择一个选项时，
selectedOption
将变为null，并且您无法从中访问属性

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


{this.state.selectedOption&&this.state.selectedOption.Model&&}
错误似乎源于您的线路：

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

所以你可以做：

{value && <this.RenderButton/>}

{value&&}


或者，这里有一个简单的方法来解决这个问题，特别是当地产有很多层深时：

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

（选择选项| |{}）。模式&&

这意味着，如果
selectedOption
无效，您可以创建一个临时对象
{}
，这样您就可以尝试从中读取
Modal
，而不会出现错误。
错误似乎来自您的行：

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

所以你可以做：

{value && <this.RenderButton/>}

{value&&}


或者，这里有一个简单的方法来解决这个问题，特别是当地产有很多层深时：

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

（选择选项| |{}）。模式&&

这意味着，如果
selectedOption
无效，您可以创建一个临时对象
{}
，这样您就可以尝试从中读取
模态
，而不会出现错误。
错误具体在哪里？您的代码中没有第54行。对不起，是的，我简化了代码，并在这里发布了它，在我的原始组件中它是第54行，现在它实际上在这里
{this.state.selectedOption.Model&&}
引发错误的确切位置是哪里？您的代码中没有第54行。对不起，是的，我简化了代码，并将其发布到这里，在我的原始组件中，它是第54行，现在它实际上在这里
{this.state.selectedOption.Model&&}
是的，谢谢，这就是问题所在，我只看了“this.state.selectedOption.Model”，因为这是抛出错误的是，谢谢这是问题所在，我只看了“this.state.selectedOption.Model”，因为这是抛出错误的非常感谢，这个答案也是正确的，也是一个很好的解决问题的备选方案，这个答案也是正确的，也是解决这个问题的好办法