英文:
Unable to display object properties when the object seems to be defined (React)
问题
我在一个MERN堆栈应用中有一些代码,用户可以在搜索栏中输入另一个用户的姓名,网页将返回他们搜索的用户的其他属性。
例如,如果我在搜索栏中搜索“John Doe”,前端应返回如下内容:
姓名:John Doe
年龄:30
性别:男
这是我用于处理此功能的React组件的代码:
import React, { useState, useEffect } from "react";
import axios from "axios";
import "../../styles/styles.css";
function SearchUser() {
const [user, setUser] = useState({});
const [searchQuery, setSearchQuery] = useState("");
const [formError, setFormError] = useState(false);
async function getUsers(query) {
const response = await axios.get(http://localhost:5000/auth/userSearch?fullName=${query}
);
setUser(response.data);
}
const handleSubmit = async (e) => {
e.preventDefault();
if (!searchQuery) {
setFormError(true);
return;
}
setFormError(false);
getUsers(searchQuery);
};
useEffect(() => {
console.log(user);
}, [user]);
return (
搜索用户
{user.fullName && (
<div>
<p>姓名:{user.fullName}</p>
<p>年龄:{user.age}</p>
<p>性别:{user.sex}</p>
</div>
)}
</div>
</div>
);
}
export default SearchUser;
**我的问题:**
经过调试和一些控制台日志记录,似乎user.fullName/user.age/user.email都是未定义的。然而,在这个控制台日志中:
useEffect(() => {
console.log("effect[user]:", JSON.stringify(user));
}, [user]);
当我在搜索栏中输入“John Doe”时,浏览器控制台中返回了一个用户对象:
effect[user]: {"user":{"_id":"63eea67c0316be96ebf799f0","email":"johndoe@example.com","passwordHash":"DU7fwnIlucrwT7R","fullName":"John Doe","age":"30","sex":"male","__v":0}}
我怀疑渲染过程中存在一些问题,但由于我对React还不够熟悉,不确定接下来该怎么办。任何帮助将不胜感激。
英文:
I have some code in a MERN stack app where users can enter another user's name into a search bar, and the webpage will return other properties of the user whose name they searched up.
For example, if I search up "John Doe" in the search bar, it should return something like this in the front end:
Name: John Doe
Age: 30
Sex: Male
Here is the code for the React component I made to handle this:
import React, { useState, useEffect } from "react";
import axios from "axios";
import "../../styles/styles.css";
function SearchUser() {
const [user, setUser] = useState({});
const [searchQuery, setSearchQuery] = useState("");
const [formError, setFormError] = useState(false);
async function getUsers(query) {
const response = await axios.get(`http://localhost:5000/auth/userSearch?fullName=${query}`);
setUser(response.data);
}
const handleSubmit = async (e) => {
e.preventDefault();
if (!searchQuery) {
setFormError(true);
return;
}
setFormError(false);
getUsers(searchQuery);
};
useEffect(() => {
console.log(user);
}, [user]);
return (
<div className="container">
<div className="create-profile-border">
<h1>Search a user</h1>
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
placeholder="Enter a user's full name here"
onChange={(e) => {
setSearchQuery(e.target.value);
}}
value={searchQuery}
/>
{formError && !searchQuery && (
<p className="error-message">This is a required field</p>
)}
</div>
<button className="create-profile-button" type="submit">
Search
</button>
</form>
{user.fullName > 0 && (
<div>
<p>Name: {user.fullName}</p>
<p>Age: {user.age}</p>
<p>Sex: {user.sex}</p>
</div>
)}
</div>
</div>
);
}
export default SearchUser;
I have checked and confirmed that the backend code is working properly, the issue purely lies in the frontend.
The Issue I have:
After debugging and some console logging, it seems that user.fullName/user.age/user.email are all undefined. However, in this console log:
useEffect(() => {
console.log("effect[user]:", JSON.stringify(user));
}, [user]);
I get back a user object in the browser console when I type "John Doe" in the search bar:
effect[user]: {"user":{"_id":"63eea67c0316be96ebf799f0","email":"johndoe@example.com","passwordHash":"DU7fwnIlucrwT7R","fullName":"John Doe","age":"30","sex":"male","__v":0}}
I suspect there's some funny business with the rendering but as I'm still inexperienced with React, I'm not sure where to go from here. Any help would be greatly appreciated.
答案1
得分: 1
我订阅了来自 Phil 的所有建议。然而,在查看了你控制台的日志后,我认为你的数据是以用户的形式返回的。因此,你应该能够通过将 user 设置为 response.data.user 来获取数据。
async function getUsers(query) {
const response = await axios.get(`http://localhost:5000/auth/userSearch?fullName=${query}`);
setUser(response.data.user);
}
或者
const getUsers = async (fullName) => {
setUser(
(
await axios.get("/auth/userSearch", {
baseURL: "http://localhost:5000/", // 更好的做法是使用你的 .env 文件
params: { fullName },
})
).data.user
);
};
英文:
I subscribe to all the suggestions from phil. However, after looking at the log from your console, I think your data is returned as a user. so you should be able to get the data by setting user to response.data.user
async function getUsers(query) {
const response = await axios.get(`http://localhost:5000/auth/userSearch?fullName=${query}`);
setUser(response.data.user);
}
or
const getUsers = async (fullName) => {
setUser(
(
await axios.get("/auth/userSearch", {
baseURL: "http://localhost:5000/", // even better, use your .env file
params: { fullName },
})
).data.user
);
};
答案2
得分: 0
你的主要问题在于尝试将字符串属性 user.fullName
与数字 0
进行比较。除非你的字符串是纯数字,否则 user.fullName > 0
将始终为 false
。
而不是将 user
初始化为空对象,尝试将其初始值设为 null
。然后你可以更容易地测试它是否有值或没有...
const [user, setUser] = useState(null);
// ...
{user && (
<div>
<p>姓名: {user.fullName}</p>
<p>年龄: {user.age}</p>
<p>性别: {user.sex}</p>
</div>
)}
另一个改进是使用 Axios 的 params
选项来正确编码URL查询参数。
更新:在提示你调试自己的API响应之后,还似乎你的响应数据是嵌套在一个 user
属性下的。
const getUsers = async (fullName) => {
setUser(
(
await axios.get("/auth/userSearch", {
baseURL: "http://localhost:5000/", // 更好的做法是使用你的 .env 文件
params: { fullName },
})
).data.user // 提取 `user` 属性
);
};
英文:
Your main issue is trying to compare the string property user.fullName
to numeric 0
. Unless your string is purely numeric, user.fullName > 0
will always be false
.
Instead of initialising user
to be an empty object, try starting it with null
. Then you can more easily test if it has a value or not...
const [user, setUser] = useState(null);
// ...
{user && (
<div>
<p>Name: {user.fullName}</p>
<p>Age: {user.age}</p>
<p>Sex: {user.sex}</p>
</div>
)}
Another improvement you can make is to employ Axios' params
option to correctly encode URL query parameters.
Update: after prompting you to debug your own API response, it also seems your response data is nested under a user
property
const getUsers = async (fullName) => {
setUser(
(
await axios.get("/auth/userSearch", {
baseURL: "http://localhost:5000/", // even better, use your .env file
params: { fullName },
})
).data.user // 👈 extract the `user` property
);
};
答案3
得分: 0
{
user: { _id: "...", email: "...", passwordHash: "...", fullName: "..." },
_id: "63eea67c0316be96ebf799f0"
age: "30"
}
英文:
Can you share the full JSON response from your API? I'm asking because what you pasted seems to imply the response looks something like this:
{
user: { _id: "...", email: "...", passwordHash: "..." },
_id: "63eea67c0316be96ebf799f0"
fullName: "John Doe"
age: "30"
}
Said another way... Based on your paste, the data.user
object does not contain the fullName
property, but rather data.fullName
does.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
- axios
- javascript
- react-hooks
- reactjs
评论