Reactjs 将分解分配结果用于未定义

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>
    }
  }

常量dropDownList=[
,
,
,
];
类BottomPanel扩展了React.Component{
建造师（道具）{
超级（道具）；
this.dropDownUpdate=this.dropDownUpdate.bind（this）；
}
状态={
dropDownValue:dropDownList[0]
};
dropDownUpdate=e=>this.setState（{dropDownValue:e.currentTarget.textContent}）；
render（）{
返回（）{
{this.state.dropDownValue}
}
}

如果

此.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>
  }
}

render（）{
const{dropDownValue}=this.state；
返回（）{
{dropDownValue}
}
}

dropDownList在哪里声明？请随意编辑您的问题，以便将来的用户可以拥有完整的上下文。如果我没有错，状态不是在

构造函数中初始化的吗？

？谢谢@larz，我已经更新了代码谢谢！所以您实际上需要在渲染函数中再次声明它，我认为它可以访问渲染函数