Reactjs 为什么转换为React钩子时此组件不工作？（对该状态和分解部分感到困惑）

基本上是尝试为预订引擎创建自动完成功能代码在类中组件希望将其转换为带有React挂钩的功能组件。已尝试转换，但我的代码显示了多个警告。如果需要，可以提供任何代码片段。 （如何转换this.state并分解this关键字）

从“React”导入React，{Component，Fragment}； 从“道具类型”导入道具类型

类自动完成类扩展组件{
静态类型={
建议：PropTypes.instanceOf（数组）
};
静态defaultProps={
建议：[]
};
建造师（道具）{
超级（道具）；
此.state={
//活动选择的索引
活动建议：0，
//与用户输入相匹配的建议
筛选建议：[]，
//是否显示建议列表
建议：错，
//用户输入的内容
用户输入：“
};
}
onChange=e=>{
const{suggestions}=this.props；
const userInput=e.currentTarget.value；
//筛选不包含用户输入的建议
const filteredSuggestions=suggestions.filter(
建议=>
suggestion.toLowerCase（）.indexOf（userInput.toLowerCase（））>-1
);
这是我的国家({
活动建议：0，
过滤建议，
建议:对,，
用户输入：e.currentTarget.value
});
};
onClick=e=>{
这是我的国家({
活动建议：0，
筛选建议：[]，
建议：错，
用户输入：e.currentTarget.innerText
});
};
onKeyDown=e=>{
const{activeSuggestion，filteredSuggestions}=this.state；
//用户按下回车键
如果（如keyCode===13）{
这是我的国家({
活动建议：0，
建议：错，
userInput:filteredSuggestions[activeSuggestion]
});
}
//用户按下向上箭头
否则如果（e.keyCode===38）{
如果（activeSuggestion==0）{
返回；
}
this.setState（{activeSuggestion:activeSuggestion-1}）；
}
//用户按下向下箭头
否则如果（e.keyCode===40）{
if（activeSuggestion-1==filteredSuggestions.length）{
返回；
}
this.setState（{activeSuggestion:activeSuggestion+1}）；
}
};
render（）{
常数{
一旦改变，
onClick，
onKeyDown，
声明：{
积极的建议,，
过滤建议，
建议,，
用户输入
}
}=这个；
让SuggestionListComponent；
if（显示建议和用户输入（&U）{
if（filteredSuggestions.length）{
SuggestionListComponent=(

{filteredSuggestions.map（（建议，索引）=>{
让类名；
//用类标记活动建议
如果（索引===activeSuggestion）{
className=“建议活动”；
}
返回(

{建议}

);
})}

);
}否则{
SuggestionListComponent=(
没有建议，你只能靠自己了！
);
}
}
返回(
{SuggestionListComponent}
);
}
}
导出默认的自动完成类；

你能用react钩子发布你的代码吗？我们帮你搞定了错误一分钟拿到了代码。。。作为答复张贴

class AutocompleteClass extends Component {
  static propTypes = {
    suggestions: PropTypes.instanceOf(Array)
  };

  static defaultProps = {
    suggestions: []
  };

  constructor(props) {
    super(props);

    this.state = {
      // The active selection's index
      activeSuggestion: 0,
      // The suggestions that match the user's input
      filteredSuggestions: [],
      // Whether or not the suggestion list is shown
      showSuggestions: false,
      // What the user has entered
      userInput: ""
    };
  }

  onChange = e => {
    const { suggestions } = this.props;
    const userInput = e.currentTarget.value;

    // Filter our suggestions that don't contain the user's input
    const filteredSuggestions = suggestions.filter(
      suggestion =>
        suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );

    this.setState({
      activeSuggestion: 0,
      filteredSuggestions,
      showSuggestions: true,
      userInput: e.currentTarget.value
    });
  };

  onClick = e => {
    this.setState({
      activeSuggestion: 0,
      filteredSuggestions: [],
      showSuggestions: false,
      userInput: e.currentTarget.innerText
    });
  };

  onKeyDown = e => {
    const { activeSuggestion, filteredSuggestions } = this.state;

    // User pressed the enter key
    if (e.keyCode === 13) {
      this.setState({
        activeSuggestion: 0,
        showSuggestions: false,
        userInput: filteredSuggestions[activeSuggestion]
      });
    }
    // User pressed the up arrow
    else if (e.keyCode === 38) {
      if (activeSuggestion === 0) {
        return;
      }

      this.setState({ activeSuggestion: activeSuggestion - 1 });
    }
    // User pressed the down arrow
    else if (e.keyCode === 40) {
      if (activeSuggestion - 1 === filteredSuggestions.length) {
        return;
      }

      this.setState({ activeSuggestion: activeSuggestion + 1 });
    }
  };

  render() {
    const {
      onChange,
      onClick,
      onKeyDown,
      state: {
        activeSuggestion,
        filteredSuggestions,
        showSuggestions,
        userInput
      }
    } = this;

    let suggestionsListComponent;

    if (showSuggestions && userInput) {
      if (filteredSuggestions.length) {
        suggestionsListComponent = (
          <ul class="suggestions">
            {filteredSuggestions.map((suggestion, index) => {
              let className;

              // Flag the active suggestion with a class
              if (index === activeSuggestion) {
                className = "suggestion-active";
              }

              return (
                <li className={className} key={suggestion} onClick={onClick}>
                  {suggestion}
                </li>
              );
            })}
          </ul>
        );
      } else {
        suggestionsListComponent = (
          <div class="no-suggestions">
            <em>No suggestions, you're on your own!</em>
          </div>
        );
      }
    }

    return (
      <Fragment>
        <input
          type="text"
          onChange={onChange}
          onKeyDown={onKeyDown}
          value={userInput}
        />
        {suggestionsListComponent}
      </Fragment>
    );
  }
}

export default AutocompleteClass;