TypeError：無法讀取React組件中null的屬性

Question

我有一個React-Select組件，它呈現一個下拉菜單，當從dropDown中選擇一個項目時，將呈現一個按鈕。

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;

但是，如果我清除該值，即不選擇另一個，而是單擊x刪除我的選擇，則會得到一個

TypeError：無法讀取null的屬性“ Model”

我確實在檢查第54行的錯誤，該值是否為'null'或'undefined'。 我在閱讀后嘗試使用typeof ， if和switch statemements：

• 是否有標准函數檢查JavaScript中的null，undefined或空白變量？
• JavaScript檢查null與undefined以及==和===之間的差異

但這也不行。

Answer 1

您需要做的是在訪問Model之前提供檢查，因為當您取消選擇選項時， selectedOption null，並且您無法從中訪問屬性。

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

Answer 2

該錯誤似乎源自您的行：

{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而不會出現錯誤。