无法使用绑定到“partialState”的对象文字调用“this.setState”，因为字符串 [1] 与字符串文字 [2] 不兼容答案

【问题标题】：Cannot call `this.setState` with object literal bound to `partialState` because string [1] is compatible not with string literal [2]无法使用绑定到“partialState”的对象文字调用“this.setState”，因为字符串 [1] 与字符串文字 [2] 不兼容
【发布时间】：2018-08-04 17:44:21
【问题描述】：

我一直在用头撞墙，试图让它发挥作用，有什么建议吗？我在这里使用流反应。我正在努力理解这个代码注释的东西，同时我也在学习。起初它是压倒性的，但在我花了一些时间在谷歌上搜索任何远程接近的东西后，我陷入了死胡同。帮忙？

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

【问题讨论】：

首先我想知道为什么你可以使用SyntheticKeyboardEvent，即使它没有被导入。其次，你能在做setState之前提供console.log(Event.currentTarget.value)的输出吗？也请澄清你的问题。你有错误吗？如果是这样：什么时候发生？您是否还可以提供相关来源（例如您的Header 组件）？
是的，请给我一些时间
Search.jsx?c103:27 Uncaught TypeError: Cannot read property 'searchTerm' of null
这是我在控制台中遇到的错误
SyntheticKeyboardEvent 是来自 flow 的类型注解

标签： javascript reactjs flowtype setstate

【解决方案1】：

我觉得你应该先设置searchTerm的类型，像这样：

type State = {
  searchTerm: string
};

然后

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

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

【讨论】：

这是给我的。不错的简单解决方案。

【解决方案2】：

//@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】：

根据我的经验，发生此错误是因为您将 Event.currentTarget.value 直接分配给 setState -function。

你可以做这样的事情来避免这个特定的问题。

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

触发此警告的规则背后没有太多信息。我最好的猜测是，它用于避免某些可能不需要或未受过多控制的 setState 事件。例如用户输入被分配给状态，而无需先解析和验证。

其他通知 => 我认为对变量使用大写命名约定并不是最佳实践。这些应该只在 React JSX 组件中使用。因此，您应该将 Event 命名为 event 或 mouseEvent 等。

ps。只是想知道与string 或?string 相比，在状态类型注释中使用" " 是否有理由？

【讨论】：