• • bounty将在5天后过期**。回答此问题可获得+50声望奖励。God's Drunkest Driver希望引起更多人关注此问题。

我在MERN堆栈应用程序中有一些代码，用户可以在搜索栏中输入另一个用户的名称，网页将返回他们搜索到的用户名称的其他属性。
例如，如果我在搜索栏中向上搜索"John Doe"，它应该在前端返回如下内容：

Name: John Doe
Age: 30
Sex: Male

下面是我为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 (
    <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;

我已经检查并确认后端代码工作正常，问题纯粹在于前端。

• • 我的问题：**

在调试和一些控制台日志记录之后，似乎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，我不知道从这里去。任何帮助将不胜感激。