Использование результатов присвоения деструктуризации не определено

Question

ES-lint хочет, чтобы я использовал присвоение состояния деструктуры в {this.state.dropDownValue}. Но если я сделаю это, dropDownValue станет неопределенным. Любые предложения о том, как это исправить? Спасибо!

const dropDownList = [
  <FormattedMessage id="bottomPanel.adherenceScores" />,
  <FormattedMessage id="bottomPanel.adherenceJourney" />,
  <FormattedMessage id="bottomPanel.adherenceTrends" />,
];

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
    super(props);
    this.dropDownUpdate = this.dropDownUpdate.bind(this);
  }

  state = {
    dropDownValue: dropDownList[0]
  };

  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });

  render() {
    return() {
      <div>
        <UncontrolledDropdown>
          <DropdownToggle tag="div" className="test">
            <div className="bottompanel-dropdown">{this.state.dropDownValue}</div>
          </DropdownToggle>          
        </UncontrolledDropdown>
      </div>
    }
  }

Answer 1

Если this.state равно { dropDownValue: 'something' }, то вы сможете деструктурировать его, используя const { dropDownValue } = this.state; внутри вашей функции render.

render() {
  const { dropDownValue } = this.state;
  return() {
    <div>
      <UncontrolledDropdown>
        <DropdownToggle tag="div" className="test">
          <div className="bottompanel-dropdown">{dropDownValue}</div>
        </DropdownToggle>          
      </UncontrolledDropdown>
    </div>
  }
}