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

Question

我一直在研究呈现下拉菜单的 react-select 组件（如下图所示）。默认情况下，它 select 是下拉列表中的值，即使我没有 select 编辑它。

Here is the Dropdown menu picture it renders and it selects 60 minutes value

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 docs，这里是 onChange 事件的第一个参数，newValue

newValue: IsMulti extends true ? ReadonlyArray<Option> : SingleValue One of<null, Option>

因此，newValue 可能是 null。您必须执行 null 检查或使用任何其他允许您这样做的语法。

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

您可以做什么的一些示例：

e && e.value
e?.value
e && this.props.onChange(e.value)

并且您可能想将事件处理程序上的参数名称更改为 newValue 或其他名称。

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

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

reactjs

react-select

redux

tsx

react-fullstack