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

使用解构分配结果未定义

1 个答案: