[英]TypeError: Cannot read properties of undefined (reading 'map') Table.render
Trying to display a filtered table, but unsuccessful, see below.试图显示过滤表,但不成功,见下文。
Keep getting an undefined error when reading map, can't seem to figure out why colleges aren't being passed when calling on filteredColleges.map(college)
阅读地图时不断收到未定义的错误,似乎无法弄清楚为什么在调用
filteredColleges.map(college)
时没有通过filteredColleges.map(college)
Could this possibly be because I'm calling on the <Table/>
component inside my App.js
and forgot a basic step?这可能是因为我正在调用
App.js
的<Table/>
组件而忘记了一个基本步骤?
App.js looks like so: App.js 看起来像这样:
return (
<div className="App">
<header className="App-header">
<h1>Partners</h1>
<Table/>
</header>
</div>
);
}
If anyone could help I'd be very, very grateful.如果有人能帮助我,我将非常非常感激。 Thanks in advance!
提前致谢!
import React , {Component } from 'react'
export default class Table extends Component {
// Display API data - componentDidMount - pull specific elements - DONE
// Create table displaying API data
// Create Search bar
// Create drop down list for prefix
// Style Ofsted Rating column
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
colleges: [],
searchByName: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ searchByName: event.target.value });
}
componentDidMount() {
fetch(`https://collegesapi/data.json`)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
colleges: result.getColleges
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
renderRow(college) {
return (
<tr key={college.id}>
<td>{college.name}</td>
<td>{college.groupPrefix}</td>
<td>
{college.logo && (
<img className="w-full" src={college.logo} alt={college.name} />
)}
</td>
<td>{college.ofstedRating}</td>
</tr>
)
}
render() {
const filterColleges = (colleges, query) => {
if(!query) {
return colleges;
}
return colleges.filter((college) => {
const collegeName = college.name.toLowerCase();
return collegeName.includes(query);
});
};
const filteredColleges = filterColleges(
this.props.colleges,
this.state.searchByName
);
const { error, isLoaded, colleges } = this.state;
if (error) {
return <div>Error: {error.message}</div>
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div>
<table className="table-fixed border-collapse">
<thead>
<tr>
<input
type="text"
placeholder="Search partners"
onChange={this.handleChange}
/>
</tr>
<tr>
<th className="w-1/12">Partner</th>
<th className="w-1/12">Prefix</th>
<th className="w-1/12">Logo</th>
<th className="w-1/12">Ofsted Rating</th>
</tr>
</thead>
<tbody>{filteredColleges.map((college) => this.renderRow(college))}</tbody>
</table>
</div>
)
}
}
}
You are referring this.props.colleges while sending to "filterColleges" function:您在发送到“filterColleges”函数时指的是 this.props.colleges:
const filteredColleges = filterColleges(
this.props.colleges,
this.state.searchByName
);
Instead, since you are setting it in states when received from API response, you should refer accordingly:相反,由于您在从 API 响应收到时将其设置为状态,因此您应该相应地参考:
const filteredColleges = filterColleges(
this.state.colleges,
this.state.searchByName
);
Also, it is always good to handle error or empty responses, for example, if your API does not return even empty array, then this code will still throw the same error.此外,处理错误或空响应总是好的,例如,如果您的 API 甚至不返回空数组,那么此代码仍然会抛出相同的错误。 So you can add null coalescing checks (??) and assign empty array in these cases, as shown below:
因此,您可以在这些情况下添加空合并检查 (??) 并分配空数组,如下所示:
this.setState({
isLoaded: true,
colleges: result?.getColleges ?? [],
});
Hope it helps!希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.