在这里，我尝试在列表中呈现任务的标题。但由于某种原因，它们无法渲染。下面是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.