web-dev-qa-db-fra.com

Impossible d'appeler `this.setState` avec le littéral d'objet lié à` partialState` car la chaîne [1] n'est pas compatible avec le littéral de chaîne [2]

Je me suis cogné la tête contre le mur pour essayer de faire fonctionner cela, un conseil? J'utilise réagir avec le flux ici. Je me bats assez pour comprendre ces annotations de code et j'apprends en même temps. Au début, c'était accablant, mais après avoir passé quelque temps sur Google à rechercher quoi que ce soit à distance, je me suis retrouvé dans une impasse. Aidez-moi?

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

C'est Header.jsx

3
reiahx01

Je pense que vous devriez d'abord définir le type de searchTerm, comme ceci:

type State = {
  searchTerm: string
};

et alors

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

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

2
jarmlaht

D'après mon expérience, cette erreur se produit parce que vous attribuez Event.currentTarget.value directement à la fonction setState. 

Vous pourriez faire quelque chose comme ceci pour éviter ce problème particulier.

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

Je n'ai pas beaucoup d'informations derrière la règle qui déclenche cet avertissement. Ma meilleure hypothèse est qu'il est utilisé pour éviter certains événements setState qui pourraient être indésirables ou qui ne sont pas trop contrôlés. par exemple. l'entrée utilisateur est assignée à l'état sans analyse ni validation préalable.

Autre avis => Je pense que l’utilisation des conventions de nommage majuscules pour les variables n’est pas une pratique recommandée. Ceux-ci doivent être utilisés uniquement dans les composants React JSX. Par conséquent, vous devez nommer Event comme event ou comme suit: mouseEvent etc. 

ps. Je me demandais simplement s'il y avait une raison d'utiliser " " dans l'annotation de type d'état par rapport à string ou ?string?

1
Jimi Pajala