javascript - 错误:试图在 React 函数组件中打印出数组元素?
问题描述
尝试记录数组元素,我收到以下错误:
TypeError:无法读取未定义的属性“0”
但是,当我可以在控制台中记录 project.tasks 数组对象时。但它无法记录元素。
该数组似乎存在,因为我可以记录对象但不能记录元素。我很困惑。想法?
代码沙盒: https ://codesandbox.io/s/blissful-mclaren-ll5wo
function EditProjectView(props) {
const [project, setProject] = useState({});
// get id from params
const { id } = useParams();
// syncronously (same time before and then after) renders it will use this hook
useLayoutEffect(() => {
// fake* ajax request to database
const data = database.projects.find((project) => {
return project.id == 123;
}, []);
setProject(data);
});
if (project) {
return (
<React.Fragment>
<main style={classes.content}>
<div style={classes.projectContainer}>
<div style={classes.projectOverviewWrapper}>
<Paper elevation={2}>
<div style={classes.project}>
{/* {<ProjectDetailsView project={project} />} */}
</div>
</Paper>
</div>
<div style={classes.tasksContainer}>
<h3>ALL TASKS</h3>
{console.log(
"prints out array object successfully i.e. [{..}, {..]] <-------------",
project.tasks
)}
{console.log(
"does NOT print array object's elements FAIL <-----------",
project.tasks[0].taskName
)}
<TaskExpansionPanel
panelTitle={
<PanelTitle
// totalTimeInMinutes={task.totalTimeInMinutes}
// taskNumber={task.taskNumber}
// taskName={task.taskName}
// taskName={project.projectName}
/>
}
panelDetails={<PanelDescription />}
/>
<CreateTaskBtn />
</div>
</div>
</main>
</React.Fragment>
);
} else {
return <p>loading..</p>;
}
}
解决方案
尝试这样做
function printTasks(tasks) {
if (tasks && tasks.length > 0) {
return ( console.log(tasks[0].taskName));
} else {
return "No tasks found";
}
}
然后在您的组件中调用它来代替您当前的检查。
{printTasks(project.tasks)}
我认为这里发生的情况是,您从数据库中的提取没有完成第一次绘制组件,所以它失败了。通过此检查,当获取数据时,它将实时看到第二次更新。
推荐阅读
- javascript - 如何调用对象的辅助函数?
- javascript - 如何访问组件的 typeof 实例中的成员?
- apache-kafka - 如何将kafka与OPC连接?
- ios - 在 xcode/swift 中使用位置管理器来获取用户的当前位置时,我得到的值为 nil。有什么建议么?
- model-view-controller - MVC 设计模式和计时器
- aframe - 动态创建的 A-FRAME 内容设置为嵌入将不会显示 A-FRAME 检查器
- c# - 沿正弦运动的矢量移动对象
- powershell - 在txt文件上使用foreach的方法是什么?
- amazon-cognito - AWS Amplify with Amazon Cognito 不记得带有托管 UI 的设备
- java - IBM MQRC_CONNECTION_BROKEN 推荐实践