Uncaught TypeError: user.toLowerCase不是一个函数

Question

好了，伙计们，新的更新。所以我就这么做了。我将所有的元素都移动到渲染中，并试图让状态保持独立。当我尝试的时候，它告诉我map不能读取undefined的属性。我所做的是添加对象键。页面呈现…有点。它在没有所有数据的情况下呈现。我附上了更新的代码在这里，但现在我有点困惑，因为它没有显示一个错误，这一次，它只是不显示信息。谁能告诉我我哪里做错了?

Answer 1

错误信息告诉您user.toLowerCase不是一个函数，这表明user不是字符串，因为toLowerCase只能与字符串一起工作。相反，user是您在useEffect的setInfo(json.students.map())调用中创建的ul元素。由于这个原因，将DOM元素存储在状态中并不理想，因为它不容易处理。相反，将info状态变量保留为对象数组，并在return中移动用于创建DOM元素的逻辑。

此外，当您进行过滤时，我不会更改您的状态，因为您将无法轻松获得原始的，未过滤的状态值。跟踪过滤器的状态，并根据返回的过滤器进行条件渲染。

Answer 2

您将用户信息设置为ul html列表。相反，将userInfo设置为json响应，然后在呈现组件时映射ul列表。

我不确定你的用户json是什么样子的，所以你可能不得不摆弄它。

import React, { useEffect, useState } from "react";
import Card from "@material-ui/core/Card";
import CardContent from '@material-ui/core/CardContent';
import Grid from "@material-ui/core/Grid";
import { Input } from "@material-ui/core";
function StudentProfiles()  {
const [info, setInfo] = useState();
const [search, setSearch] = useState('');


useEffect(() => {

fetch("https://api.hatchways.io/assessment/students")
.then(response => response.json())
.then(json => setInfo(json))
},[]);


const average = (array) => array.reduce((a,b) => a + b )/ array.length;

const filter = (e) => {
const keyword = e.target.value;
if(keyword !== '') {
const results = info.filter((user) => {
return user.students.toLowerCase().startsWith(keyword.toLowerCase());
});
setInfo(results);
} else {
setInfo(info)
}
}
return (
<div>
<Card className="card">
<CardContent className="scrollbar scrollbar-primary mt-5 mx-auto">
<Input
className="searchBar"
icon="search"
placeholder="Search by name"
onChange={filter}
/>
{ user.students.map((name) => (
<ul className = "border" key={name.id}>
<Grid item xs={3} sm={6} md={12} style={{display: "flex", gap:"3.5rem", paddingBottom:"8px"}}>
<img alt ="" src={name.pic} className="picture"></img> 
<Grid  container style={{display: "inline"}} align="left" justify="flex-end" alignItems="flex-start">
<Grid  className="studentNames">
<span>{name.firstName + " " + name.lastName}</span>
</Grid>
<span>{name.email}</span>
<br/>
<span>{name.company}</span>
<br/>
<span>{name.skill}</span>
<br/>
<span>Average: {average(name.grades).toFixed(3)}%</span>
</Grid>
</Grid>
</ul>
)))}
</CardContent>
</Card>
</div>
)
}
export default StudentProfiles;