javascript - 无法使用绑定(bind)到 `this.setState` 的对象文字调用 `partialState`，因为字符串 [1] 与字符串文字 [2] 不兼容

Question

我一直在用头撞墙试图让它工作，有什么建议吗？我在这里使用 react with flow。我很难理解这些代码注释的东西，同时我也在学习。起初它是压倒性的，但在我花了一些时间在谷歌上搜索远程关闭的任何东西之后，我已经走到了死胡同。帮助？

//@flow

import React, { Component } from 'react';
import ShowCard from './ShowCard';
import Header from './Header';

type Props = {
  shows: Array<Show>
};

type State = {
  searchTerm: " "
};

class Search extends Component<Props, State> {

  handleSearchTermChange = (Event: SyntheticKeyboardEvent<KeyboardEvent> & { currentTarget: HTMLInputElement }) => {
    //this.setState({ searchTerm: event.currentTarget.value });
    const newState = this.setState({ searchTerm: Event.currentTarget.value });
    return newState;
  };

  render() {
    return (
      <div className="search">
        <Header searchTerm={this.state.searchTerm} showSearch handleSearchTermChange={this.handleSearchTermChange} />
        <div>
          {this.props.shows
            .filter(
              show =>
                `${show.title} ${show.description}`.toUpperCase().indexOf(this.state.searchTerm.toUpperCase()) >= 0
            )
            .map(show => <ShowCard key={show.imdbID} {...show} />)}
        </div>
      </div>
    );
  }
}

export default Search;

Answer 1

我认为你应该首先设置 searchTerm 的类型，如下所示:

type State = {
  searchTerm: string
};

然后

class Search extends Component<Props, State> {
  state = {
    searchTerm: " ",
  };

参见:https://flow.org/en/docs/react/components/#toc-adding-state