大佬教程收集整理的这篇文章主要介绍了类型错误：未定义 [1] 中缺少流属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
嗨，我构建了一个单页应用程序来按名称搜索，当我在搜索栏中输入任何字符时，似乎出现类型错误，所以我使用 FLOW 进行检查，下面是两个错误。有人告诉我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,@R_502_5553@left: 300,@R_502_5553@Right: 300,@R_502_5553@Bottom: 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,}}
>
<GrID container spacing={1}>
<GrID item style={{ @R_502_5553@top: 50,@R_502_5553@Right: 0 }}>
<Avatar style={{ wIDth: 100,height: 100 }}>
<img
src={student.pic}
alt="avatar"
style={{ wIDth: 100,height: 100 }}
/>
</Avatar>
</GrID>
<GrID item style={{ @R_502_5553@left: 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" />;
}
我还在链接中创建以帮助我的助手进行测试或游戏：https://codesandbox.io/s/ecstatic-cache-2swtl
您的问题是因为在 data 调用中初始化 useState() 时，它是未定义的，如果您立即运行 handlenameSearch，您会发现它会崩溃，因为 {{ 1}} 未定义，正如您的流程错误所说，因此 data 会崩溃，并且流程会抛出错误以防止这种情况发生。
有多种方法可以防止这种情况发生，您可以在创建 data.students 函数之前return null，尽管考虑到您作为过滤器尝试完成的任务，这可能是错误的。
如果我们只是忽略此错误，我怀疑您的其余逻辑是否会正常运行，但为了让您渡过难关，我建议您只做最简单的事情，并且仅在填充数据时运行代码块
handlenameSearch我用setData({ students: result });替换setData(() => { return { students: result } })并替换const result = newarr.filter((student) => student !== undefined); const result = newarr.filter((student) => student !== null);在handlenameSearch内。实时搜索效果很好
以上是大佬教程为你收集整理的类型错误：未定义 [1] 中缺少流属性全部内容，希望文章能够帮你解决类型错误：未定义 [1] 中缺少流属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。