试图弄清楚如何使用.map解决错误,但无法确定如何解决。尝试将我的反应应用程序转换为useState和useEffect以及其他部分正在运行,但是此错误不断弹出。在转换为useState和useEffect之前,该应用程序运行良好。但是转换后,我不断收到此错误:
TypeError: props.results.map is not a function
EmployeeTables
src/components/EmployeeTables.js:21
18 | <th>DOB</th>
19 | </tr>
20 | </thead>
> 21 | <tbody>
| ^ 22 | {props.results.map(
23 | ({ login, picture, name, phone, email, dob }) => (
24 | <tr key={login.uuid}>
这是我的代码。
import React from "react";
import Moment from "react-moment";
import "../style.css";
function EmployeeTables(props) {
return (
<table>
<thead className = "header"
style = {{
backgroundColor: props.theme === "green" ? "#5cb85c" : "white",
textAlign: "center"
}}>
<tr>
<th></th>
<th onClick={props.sortByName}>Name</th>
<th>Phone</th>
<th onClick={props.sortByEmail}>Email</th>
<th>DOB</th>
</tr>
</thead>
<tbody>
{props.results.map(
({ login, picture, name, phone, email, dob }) => (
<tr key={login.uuid}>
<td>
<img src={picture.thumbnail} alt=''></img>
</td>
<td>
{name.first} {name.last}
</td>
<td>{phone}</td>
<td>{email}</td>
<td><Moment format="MM/DD/YYYY">{dob.date}</Moment></td>
</tr>
)
)}
</tbody>
</table>
);
}
export default EmployeeTables;
非常感谢提供的任何帮助。
您可以按照以下方法执行以下操作:
- 检查 props.results,例如: props.results && props.results.map({login, picture, name, phone, email, dob } =>//继续你的代码(
- 从 EmployeeTables 组件的父组件设置默认结果状态,例如:const [results, setResult] = useState([]( in hook
请确保您正在results
prop 中获取数组数据。
您可能正在从 API 获取 props.results,并且它的值在组件挂载或从任何其他资源获取数据时undefined
,这在组件渲染后加载和传递数据只需要很少的时间。
因此,在使用本机实用程序(如map
或find
(时永远不要依赖道具。为了避免此类问题,请使用默认道具。
EmployeeTables.defaultProps({
results: []
})
它也很好用于 proptypes,以便在传递无效数据类型时获得有用的控制台警告。
在使用本机函数时map
始终在使用条件之前合并条件,并确保在 prop 中获取数组类型数据。
{Array.isArray(props.results) && props.results.map(
({ login, picture, name, phone, email, dob }) => (
<tr key={login.uuid}>
<td>
<img src={picture.thumbnail} alt=''></img>
</td>
<td>
{name.first} {name.last}
</td>
<td>{phone}</td>
<td>{email}</td>
<td><Moment format="MM/DD/YYYY">{dob.date}</Moment></td>
</tr>
)
)}
{
!props.results ? null : props.results.map( () => ...)
}
这应该有效,在初始加载时可能props.results
为空。