type error:flow property is missing in undefined [1]

Question

你好，我构建了一个单页应用程序来按名称搜索，当我在搜索栏中输入任何字符时，似乎出现类型错误，所以我使用 FLOW 进行检查，下面是两个 errors.I 被告知incompatible-use，但什么是正确的用法，谁能给我一些文件供我阅读？

Error -------------------------------------------------------------------------------------- src/component/List.js:22:25
Cannot get `data.students` because property `students` is missing in undefined [1]. [incompatible-use]

   src/component/List.js:22:25
   22|     const newarr = data.students.map(student => {
                               ^^^^^^^^

References:
   src/component/List.js:10:27
   10|   const [data, setData] = useState();
                                 ^^^^^^^^^^ [1]


Error -------------------------------------------------------------------------------------- src/component/List.js:68:31
Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type
annotation at function return: [signature-verification-failure]

下面是我的代码：

// @flow
import React, { useState, useEffect } from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Avatar from "@material-ui/core/Avatar";
import TextField from "@material-ui/core/TextField";

function User({ login }) {
  const [data, setData] = useState();

  useEffect(() => {
    if (!login) return;
    fetch(`https://api.hatchways.io/assessment/${login}`)
      .then((response) => response.json())
      .then(setData)
      .catch(console.error);
  }, [login]);

  const handleNameSearch = (e) => {
    const newarr = data.students.map((student) => {
      if (
        student.firstName.toUpperCase().includes(e.target.value.toUpperCase())
      )
        return student;
      else if (
        student.lastName.toUpperCase().includes(e.target.value.toUpperCase())
      )
        return student;
      else return null;
    });
    const result = newarr.filter((student) => student !== undefined);
    setData({ students: result });
  };

  if (data)
    return [
      <Paper
        style={{
          maxWidth: 600,
          maxHeight: 300,
          marginLeft: 300,
          marginRight: 300,
          marginBottom: 10,
        }}
      >
        <TextField
          onChange={handleNameSearch}
          id="standard-basic"
          label="Search by name"
          style={{ width: 600 }}
        />
      </Paper>,
      <div>
        {data.students.map((student, index) => {
          const newgrades = student.grades.map((x) => +x);
          return (
            <Paper
              key={student.id}
              style={{
                maxWidth: 600,
                maxHeight: 300,
                marginLeft: 300,
                marginRight: 300,
              }}
            >
              <Grid container spacing={1}>
                <Grid item style={{ marginTop: 50, marginRight: 0 }}>
                  <Avatar style={{ width: 100, height: 100 }}>
                    <img
                      src={student.pic}
                      alt="avatar"
                      style={{ width: 100, height: 100 }}
                    />
                  </Avatar>
                </Grid>
                <Grid item style={{ marginLeft: 30 }}>
                  <h1>{student.firstName + " " + student.lastName}</h1>
                  <section>
                    <p>Email:{student.email}</p>
                    <p>Company:{student.company}</p>
                    <p>Skill:{student.skill}</p>
                    <p>
                      Average:
                      {newgrades.reduce(
                        (accumulator, currentValue) =>
                          accumulator + currentValue,
                      ) / newgrades.length}
                      %
                    </p>
                  </section>
                </Grid>
              </Grid>
            </Paper>
          );
        })}
      </div>,
    ];

  return null;
}

export default function List() {
  return <User login="students" />;
}

我也在link中创建来帮助我的帮手测试或玩：https://codesandbox.io/s/ecstatic-cache-2swtl

Answer 1

你的问题是因为当 data 在 useState() 调用中初始化时，它是未定义的，如果你立即运行 handleNameSearch 你会发现它会崩溃，因为 data 未定义，正如您的流程错误所说，因此 data.students 会崩溃，并且流程抛出错误以防止这种情况发生。

有很多方法可以防止这种情况发生，您可以 return null 在创建 handleNameSearch 函数的早期，尽管考虑到您作为过滤器想要完成的任务，这可能是错误的.

我怀疑如果我们简单地忽略此错误，您的其余逻辑是否会正常运行，为了让您顺利通过，我建议您只做最简单的事情，如果数据是运行代码块人口稠密

  const handleNameSearch = (e) => {
    if (!data) return;

    const newarr = data.students.map((student) => {
      if (
        student.firstName.toUpperCase().includes(e.target.value.toUpperCase())
      )
        return student;
      else if (
        student.lastName.toUpperCase().includes(e.target.value.toUpperCase())
      )
        return student;
      else return null;
    });
    const result = newarr.filter((student) => student !== undefined);
    setData({ students: result });
  };

Answer 2

我将setData({ students: result });替换为setData(() => { return { students: result } })并替换const result = newarr.filter((student) => student !== undefined); const result = newarr.filter((student) => student !== null);在 handleNameSearch 内。实时搜索效果很好

type error:flow property is missing in undefined [1]

type error:flow property is missing in undefined [1]

fetch

flowtype

use-effect