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状态记忆：

但是这也不起作用。

Answer 1

您需要做的是在访问Model之前提供一项检查，因为当您取消选择某个选项时，selectedOption变为空并且您无法从中访问属性。

 <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而不会出错

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

2 个答案: