使用带有流量的参考功能 - 无法以未定义的值访问属性

Question

我正在为现有项目添加流量。我的正常道具类型检查运作良好，但是我无法弄清楚为什么我的搜索输入参考功能存在问题。我遵循了流文档，并使用searchInput: ?HTMLInputElement设置了一条线，但这只是导致更多错误。这是我正在使用的代码的删除版本，其中所有相关的this.searchInput参考剩余：

// @flow
import React, { Component } from 'react'
class DataTable extends Component {
    searchInput: ?HTMLInputElement
    loadNextPage = () => {
        const isFetching = this.props.isFetching
        const number = this.props.paginationNumber
        const links = this.props.links
        if (!isFetching && links.next && this.searchInput.value === '') {
            this.props.fetchData(number + 1, 10)
        }
    }
    handleKeyDown = e => {
        if (e.keyCode === 13) {
            this.search(e.target.value)
        }
    }
    search = text => {
        this.props.searchData(1, 1, text)
        this.forceUpdate()
    }
    handleSearch = () => {
        this.search(this.searchInput.value)
    }
    handleClear = () => {
        this.clearSearch()
    }
    clearSearch = () => {
        const number = this.props.paginationNumber
        if (this.searchInput.value !== '') {
            this.searchInput.value = ''
            this.props.clearSearch()
            this.props.fetchData(number + 1, 10)
        }
    }
    render() {
            <Flex justify="center">
            <Box>
                <input
                type="search"
                ref={ input => this.searchInput = input }
                onKeyDown={ this.handleKeyDown }
                />
                <PrimaryButton
                onClick={ this.handleSearch }>
                SEARCH
                </PrimaryButton>
                <PrimaryButton 
                onClick={ this.handleClear }>
                CLEAR
                </PrimaryButton>
            </Box>
            </Flex>
        )
    }

这将对this.searchInput.value的每个引用产生以下错误：

this.search(this.searchInput.value)
^^^^^ property `value`. Property cannot be accessed on possibly null value
this.search(this.searchInput.value)
 ^^^^^^^^^^^^^^^^ null or undefined

我还尝试从?HTMLInputElement删除?，但这给了我这个错误：

ref={ input => this.searchInput = input }
^^^^^ null. This type is incompatible with
ref={ input => this.searchInput = input }
^^^^^^^^^^^^^^^^ HTMLInputElement

有什么想法我如何获得这些类型的检查？

Answer 1

问题是您正在尝试在类型的内容上访问value。原因是在同一页面上：

?HTMLButtonElement中的?很重要。在上面的示例中 ref的第一个论点是HTMLButtonElement | null，因为React将 当组件卸下时，用null调用您的ref回调。还， MyComponent上的button属性将在React具有 完成渲染。在此之前，您的button裁判将不确定。 保护自己免受这些情况并使用?(例如 ?HTMLButtonElement(保护自己免受虫子的侵害。

看起来像是过分的杀伤力，但绝对可以从随机问题中拯救您。您应该进行以下更改：

class DataTable extends Component {
  searchInput: ?HTMLInputElement
  loadNextPage = () => {
      const isFetching = this.props.isFetching
      const number = this.props.paginationNumber
      const links = this.props.links
      if (!isFetching && links.next && this.searchInput && this.searchInput.value === '') {
          this.props.fetchData(number + 1, 10)
      }
  }
  handleSearch = () => {
    if (!this.searchInput) {
      return
    }
    this.search(this.searchInput.value)
  }
  clearSearch = () => {
    const number = this.props.paginationNumber;
    if (this.searchInput && this.searchInput.value !== '') {
      this.searchInput.value = ''
      this.props.clearSearch()
      this.props.fetchData(number + 1, 10)
    }
  }
  // ...etc
}

您正在尝试访问类型为null的事物上的属性，这就是为什么您会看到错误的原因。您只需要检查存在。

Answer 2

我不能保证为什么会发生这种情况，但我认为这是因为ref是因为在调用ref回调之前执行了流程到null。

解决此问题的一种方法是放置：

searchInput: any

这不是最好的解决方案，因为您没有完全指定一种类型，但是您也可以尝试做

之类的事情

searchInput: HTMLInputElement | null 

不能保证第二种方法对您有用。有时，我发现不可避免地要使用任何类型，只是为了节省很多时间。我强烈建议尽可能避免它...