在这里,我尝试在列表中呈现任务的标题。但由于某种原因,它们无法渲染。下面是MyTasks
组件:
const MyTasks = (props) => {
const tasks = [...props.tasks];
console.log(props.tasks, "props.tasks");
console.log(tasks, "tasks");
console.log(tasks[0], "tasks[0]");
return (
<ListGroup className="mx-2 mt-4">
{tasks.map((task) => {
return <ListGroup.Item key={task.id}>{task.title}</ListGroup.Item>;
})}
</ListGroup>
);
};
export default MyTasks;
我在组件内部尝试了console.log
,但由于某种原因,我无法访问数组元素,但我可以查看props.tasks
数组。
在我的TaskLists
组件中,我正在渲染MyTasks
组件。TaskLists
组件正在使用useState钩子来更新MyTasks
组件的tasks
prop值,但在子组件重新呈现期间,我无法访问props.tasks
数组中的元素。
const TaskList = () => {
const [tasks, setTasks] = useState([]);
const getTasks = () => {
//code to get tasks data from data base
setTasks(taskList);
};
return (
<ListGroup className="mx-2 mt-4">
<MyTasks tasks={tasks} />
</ListGroup>
);
};
Here is my console.log
screenshot, I cant access the array elements for some reason.
3条答案
按热度按时间llew8vvj1#
props.tasks.indexOf(i)
试图返回元素i
的索引,但是i
本身就是索引!相反,请尝试使用上面评论中建议的element.id
。kh212irz2#
你能不能试着在foreach中使用
console.log
,所以首先验证你在循环中得到的值。如果你能得到那么它应该打印,否则你会知道问题在哪里。j7dteeu83#
您提供的代码似乎是一个名为
MyTasks
的React组件。您似乎试图使用props.tasks
数组呈现任务标题列表。但是,您提到任务标题未呈现。以下是解决此问题的一些建议:
1.检查
props.tasks
是否正确传递给组件:确保将tasks
属性从父组件正确传递给MyTasks
组件。1.验证
props.tasks
的数据结构:确保props.tasks
是一个对象数组,并且每个对象都有一个title
属性。您可以使用console.log
检查props.tasks
数据结构并验证它是否符合您的期望。1.确保正在渲染组件:再次检查父组件的JSX代码中是否呈现了
MyTasks
组件。如果不呈现组件,它的逻辑将不会被执行。1.验证
props.tasks
阵列是否为空:如果props.tasks
数组为空,forEach循环将不会执行,并且不会向list
数组添加列表项。确保props.tasks
阵列包含必要的数据。1.检查控制台中的任何错误:在浏览器控制台中查找任何可能指示问题来源的错误消息。
通过检查这些要点,您应该能够识别问题并解决它。