web-dev-qa-db-ja.com

文字列[1]は文字列リテラル[2]と互換性がないため、オブジェクトリテラルを `partialState`にバインドして` this.setState`を呼び出すことはできません。

私はこれを機能させるために壁に頭をぶつけてきました、何かアドバイスはありますか？ここではフローとの反応を使用しています。私はこのコード注釈のことを理解するためにかなりの戦いをしていますが、同時に学んでいます。最初は圧倒的でしたが、グーグルでリモートに近いものを探してしばらく過ごした後、行き止まりになりました。助けて？

//@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;
javascriptreactjsflowtypesetstate
6
reiahx01

まず、次のようにsearchTermのタイプを設定する必要があると思います。

type State = {
  searchTerm: string
};

その後

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

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

3
jarmlaht
//@flow

import React from 'react';
import { Link } from 'react-router-dom';

const Header = (props: { showSearch?: any, handleSearchTermChange?: Function, searchTerm?: string }) => {
  let utilSpace = null;

  if (props.showSearch) {
    utilSpace = (
      <input onChange={props.handleSearchTermChange} value={props.searchTerm} type="text" placeholder="Search" />
    );
  } else {
    utilSpace = (
      <h2>
        <Link to="/search">Back</Link>
      </h2>
    );
  }

  return (
    <header>
      <h1>
        <Link to="/">svideo</Link>
      </h1>
      {utilSpace}
    </header>
  );
};

Header.defaultProps = {
  showSearch: false,
  handleSearchTermChange: function noop() {},
  searchTerm: ''
};

export default Header;

これはHeader.jsxです

3
reiahx01

私の経験では、このエラーは、Event.currentTarget.valueをsetState関数に直接割り当てているために発生します。

この特定の問題を回避するために、このようなことをしている可能性があります。

const toState = Event.currentTarget.value;
return this.setState({ searchTerm: toState });

この警告をトリガーするルールの背後にある情報はあまりありません。私の最善の推測は、それは、望ましくない可能性がある、またはあまり制御されていない特定のsetStateイベントを回避するために使用されるということです。例えばユーザー入力は、最初に解析および検証せずに状態に割り当てられます。

その他の注意=>変数に大文字の命名規則を使用することはベストプラクティスではないと思います。これらはReact JSXコンポーネントでのみ使用する必要があります。したがって、EventにeventまたはmouseEventなどの名前を付ける必要があります。

ps。 stringまたは" "と比較して、状態タイプの注釈で?stringを使用する理由があるのだろうか？

1
Jimi Pajala