未捕获的类型错误：无法读取 null 的属性(读取"值")

Question

我一直在制作react-select组件，它呈现下拉菜单(下面提到的图像)。默认情况下，即使我没有选择它，它也会从下拉菜单中选择值。

这是它渲染的下拉菜单图片它选择了60分钟的值

import React from 'react';
import { uniqueId } from 'lodash';
import Select from 'react-select';
import LabelWrapper from '../LabelWrapper';
import AlertWrapper from '../AlertWrapper';
const styles = require('./styles.module.scss');
type Props = {
multi: boolean;
options: Array<{ label: string; value: string }>;
onChange: (selectElementValue: { label: string; value: string }) => {};
onBlur: () => {};
value: { value: string, label: string};
error: string;
placeholder: string;
label: string;
horizontalLabel: boolean;
required?: boolean;
};
class CreatableSelect extends React.Component<Props, {}> {
inputId: string;
constructor(props) {
super(props);
this.inputId = uniqueId('id_');
}
render() {
const disabled = this.props.options.length === 0;
return (
<LabelWrapper
forId={this.inputId}
error={!!this.props.error}
label={this.props.label}
horizontal={this.props.horizontalLabel}
required={this.props.required}
>
<AlertWrapper>
<Select.Creatable
multi={this.props.multi}
options={this.props.options}
onChange={e => this.props.onChange(e.value)}
disabled={disabled}
placeholder={this.props.placeholder}
className={this.props.error ? styles.hasError : null}
onBlur={this.props.onBlur}
value={this.props.value}
inputProps={{ id: this.inputId }}
/>
</AlertWrapper>
{this.props.error && (
<span className="help-block">{this.props.error}</span>
)}
</LabelWrapper>
);
}
}
export { CreatableSelect };

然而，我想从下拉菜单中清除这个值，但是，它给了我控制台错误:

Uncaught TypeError: Cannot read properties of null (reading 'value')

我的代码可能出了什么问题?

Answer 1

从react-select文档中，这里是onChange事件的第一个参数，newValue

newValue: IsMulti extends true ?ReadonlyArray

: SingleValue One of<null,>

所以可能newValuenull。您必须执行null检查或使用任何其他允许您这样做的语法。

对于习惯于在select上直接使用onChange的人来说，这个API可能并不直观，但他们已经选择了它，如果你想使用它，你就必须遵守它。

你可以做的一些例子:

1. e && e.value
2. e?.value
3. e && this.props.onChange(e.value)

也许你想改变你的事件处理程序的参数名称为newValue或其他东西。