Question

我已经开始在使用create-react-app工具创建的项目之上使用Flow类型。我很难做出一个简单的场景工作，其中一个类属性在render方法中填充了元素引用但抛出了2个错误。我究竟做错了什么？所有检查都应该阻止这些警告。

class MyComponent extends React.Component<*> {
  input: ?HTMLInputElement;

  componentDidUpdate = () => {
    if (this.input) {
        this.input.focus();
        if (this.input.value) {
            const valueLength = this.input.value.length;
            this.input.setSelectionRange(valueLength, valueLength);
        }
    }
  };

  render() {
    return <input ref={ref => (this.input = ref)} />;
  }
}

     Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/todo/index.js:38:28

 Property value is missing in null or undefined [1].

  [1] 33│     input: ?HTMLInputElement;
      34│
      35│     componentDidUpdate = () => {
      36│         if (this.input) {
      37│             this.input.focus();
      38│             if (this.input.value) {
      39│                 const valueLength = this.input.value.length;
      40│                 this.input.setSelectionRange(valueLength, valueLength);
      41│             }


 Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/todo/index.js:40:28

 Cannot call this.input.setSelectionRange because property setSelectionRange is missing in null or undefined [1].

  [1] 33│     input: ?HTMLInputElement;
      34│
      35│     componentDidUpdate = () => {
      36│         if (this.input) {
      37│             this.input.focus();
      38│             if (this.input.value) {
      39│                 const valueLength = this.input.value.length;
      40│                 this.input.setSelectionRange(valueLength, valueLength);
      41│             }
      42│         }
      43│     };

Answer 1

由于您正在调用方法，因此flow假定事情可能随时发生变化。您需要保持对输入的引用，然后您才能做好。如下所示：

    private static void arePDFFilesEqual(File pdfFile1, File pdfFile2) throws IOException
{
    LOG.info("Comparing PDF files ("+pdfFile1+","+pdfFile2+")");
    PDDocument pdf1 = PDDocument.load(pdfFile1);
    PDDocument pdf2 = PDDocument.load(pdfFile2);
    PDPageTree pdf1pages = pdf1.getDocumentCatalog().getPages();
    PDPageTree pdf2pages = pdf2.getDocumentCatalog().getPages();
    try
    {
        if (pdf1pages.getCount() != pdf2pages.getCount())
        {
            String message = "Number of pages in the files ("+pdfFile1+","+pdfFile2+") do not match. pdfFile1 has "+pdf1pages.getCount()+" no pages, while pdf2pages has "+pdf2pages.getCount()+" no of pages";
            LOG.debug(message);
            throw new TestException(message);
        }
        PDFTextStripper pdfStripper = new PDFTextStripper();
        LOG.debug("pdfStripper is :- " + pdfStripper);
        LOG.debug("pdf1pages.size() is :- " + pdf1pages.getCount());
        for (int i = 0; i < pdf1pages.getCount(); i++)
        {
            pdfStripper.setStartPage(i + 1);
            pdfStripper.setEndPage(i + 1);
            String pdf1PageText = pdfStripper.getText(pdf1);
            String pdf2PageText = pdfStripper.getText(pdf2);
            if (!pdf1PageText.equals(pdf2PageText))
            {
                String message = "Contents of the files ("+pdfFile1+","+pdfFile2+") do not match on Page no: " + (i + 1)+" pdf1PageText is : "+pdf1PageText+" , while pdf2PageText is : "+pdf2PageText;
                LOG.debug(message);
                System.out.println("fff");
                LOG.debug("pdf1PageText is " + pdf1PageText);
                LOG.debug("pdf2PageText is " + pdf2PageText);
                String difference = StringUtils.difference(pdf1PageText, pdf2PageText);
                LOG.debug("difference is "+difference);
                throw new TestException(message+" [[ Difference is ]] "+difference);
            }
        }
        LOG.info("Returning True , as PDF Files ("+pdfFile1+","+pdfFile2+") get matched");
    } finally {
        pdf1.close();
        pdf2.close();
    }
}

Flow Type抱怨通过react ref分配的类属性

1 个答案: