英文:
Data is showing up in console but not in screen or in DOM
问题
I wrote this code
import axios from "axios";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import UserInfo from "../components/UserInfo";
const Users = () => {
const [users, setUsers] = useState(null);
useEffect(() => {
console.log("fetching users...");
axios.get("http://localhost:4000/api/users").then((response) => {
setUsers(response.data);
console.log(response.data);
});
}, []);
return (
<div>
<h1>Users:</h1>
<ol>
{users &&
users.map((user) => {
console.log(user.name);
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link>
<Link>Delete</Link>
</li>;
})}
</ol>
<Link
to="/signup"
className="fixed top-5 right-5 bg-green-500 font-semibold hover:text-white py-2 px-4 border-black rounded"
>
Add user
</Link>
</div>
);
};
export default Users;
Here's the UserInfo file
import { useLocation } from "react-router-dom";
const UserInfo = ({ user }, full) => {
let User = user;
const location = useLocation();
if (location.state) {
User = location.state.user;
full = true;
}
const { name, employee_id, pass } = User;
if (full === true) {
return (
<div className="text-center">
<h2>Name:{name}</h2>
<p>ID: {employee_id}</p>
<p>Pass: {pass}</p>
</div>
);
} else {
return (
<div className="border border-black min-w-min text-center overflow-x-auto hover:bg-blue-400 hover:text-white">
<h2>Name: {name}</h2>
</div>
);
}
};
export default UserInfo;
I did exactly the same thing in another file, and that's showing up perfectly, but this isn't showing up even in the DOM. I tried searching the web and stuff but couldn't get an answer. I don't know what I did wrong. I am using Node.js in the backend. :
英文:
I wrote this code
import axios from "axios";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import UserInfo from "../components/UserInfo";
const Users = () => {
const [users, setUsers] = useState(null);
useEffect(() => {
console.log("fetching users...");
axios.get("http://localhost:4000/api/users").then((response) => {
setUsers(response.data);
console.log(response.data);
});
}, []);
return (
<div>
<h1>Users:</h1>
<ol>
{users &&
users.map((user) => {
console.log(user.name);
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link> &nbsp;
<Link>Delete</Link>
</li>;
})}
</ol>
<Link
to="/signup"
className="fixed top-5 right-5 bg-green-500 font-semibold hover:text-white py-2 px-4 border-black rounded"
>
Add user
</Link>
</div>
);
};
export default Users;
Here's the UserInfo file
import { useLocation } from "react-router-dom";
const UserInfo = ({ user }, full) => {
let User = user;
const location = useLocation();
if (location.state) {
User = location.state.user;
full = true;
}
const { name, employee_id, pass } = Company;
if (full === true) {
return (
<div className="text-center">
<h2>Name:{name}</h2>
<p>ID: {employee_id}</p>
<p>Pass: {pass}</p>
</div>
);
} else {
return (
<div className="border border-black min-w-min text-center overflow-x-auto hover:bg-blue-400 hover:text-white">
<h2>Name: {name}</h2>
</div>
);
}
};
export default UserInfo;
I did exactly same thing in another file and thats showing up perfectly but this isn't showing up even in DOM. I tried searching the web and stuff but couldn't get an answer. I don't know what i did wrong. I am using node in the backend. :
the output in console
the dom
答案1
得分: 1
主要问题在于你正在这样做,请查看代码中的注释:
<ol>
{users &&
users.map((user) => {
// 因为你使用了{}来包装这个逻辑,所以需要显式返回JSX
console.log(user.name);
// 在<li>之前添加return
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link>
<Link>Delete</Link>
</li>;
})}
</ol>
如果你不想显式返回,需要删除大括号,只放置JSX,类似这样:
<ol>
{users &&
users.map((user) =>
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link>
<Link>Delete</Link>
</li>;
)}
</ol>
请记住,返回值不是与React相关的事情,而是与箭头函数的工作原理相关。希望这个答案对你有帮助。
英文:
The main problem here is that you are doing this, see the comments in the code
<ol>
{users &&
users.map((user) => {
// As you used {} to wrap this logic because the console log you need to
// explicit return the JSX
console.log(user.name);
// return before the <li
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link> &nbsp;
<Link>Delete</Link>
</li>;
})}
</ol>
If you don't want to explicit return you need to remove brackets and only put the jsx, something like this
<ol>
{users &&
users.map((user) =>
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link> &nbsp;
<Link>Delete</Link>
</li>;
)}
</ol>
Remember that return thing is not something related to React, it is related to how arrow functions work
Hope this answer helps you
答案2
得分: 0
修复后的代码:
{users &&
users.map((user) => (
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link>
<Link>Delete</Link>
</li>
))}
英文:
Ok so i solved it. The problem was i was using {}
after map but i should have used ()
. Hope this helps someone stuck like me.
Fix was in the Users
Component.
Original code:
{users &&
users.map((user) => {
console.log(user.name);
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link> &nbsp;
<Link>Delete</Link>
</li>;
})}
Fixed code:
{users &&
users.map((user) =>(
<li key={user._id} className="w-9/12 my-2">
{user.name}
<UserInfo user={user} full={false} />
<Link>Update</Link> &nbsp;
<Link>Delete</Link>
</li>;
))}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论