英文:
Consolo.log shows I'm getting my items from api, however they are not rendered on my page?
问题
以下是您提供的代码的中文翻译部分：
这是我写的代码。
import React from "react";
import { Todo } from "../../typings";
import Link from "next/link";
const fetchTodos = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/todos/");
const todos: Todo[] = await res.json();
console.log(todos);
return todos;
};
async function TodoList() {
const todos = await fetchTodos();
return (
<>
{todos.map((todo) => {
<p>
<Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
</p>;
})}
</>
);
}
export default TodoList;
我在使用map函数来在我的页面上渲染项目时遇到了问题，但我确实在控制台上看到了我的项目，所以我认为问题可能出在map函数上。不确定哪里出了问题。
如果您需要任何其他翻译或帮助，请随时告诉我。
英文:
Here is the code that I wrote.
import React from "react";
import { Todo } from "../../typings";
import Link from "next/link";
const fetchTodos = async () => {
const res = await
fetch("https://jsonplaceholder.typicode.com/todos/");
const todos: Todo[] = await res.json();
console.log(todos);
return todos;
};
async function TodoList() {
const todos = await fetchTodos();
return (
<>
{todos.map((todo) => {
<p>
<Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
</p>;
})}
</>
);
}
export default TodoList;
I have trouble using map to render the items on my page, but I do have my items logged on console, so I think it's just the map function. Not sure what's not working.
答案1
得分: 1
每当我们使用 map 函数时，都需要使用 return 语句，以便数据能够渲染，用户可以在页面上看到数据。
{todos.map((todo) => {
return (
<>
<p>
<Link href={`/todos/${todo.id}`}>任务：{todo.id}</Link>
</p>
</>
);
})}
如果不使用它，就什么都看不到 
希望这有所帮助！
英文:
Whenever we use map function always need to use the return statement so that data could render and user could see data on page.
{todos.map((todo) => {
return (
<>
<p>
<Link href={`/todos/${todo.id}`}>Todo: {todo.id}</Link>
</p>
</>
)
})}
Without using it couldn't see anything
I hope this helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论