未处理的运行时错误类型错误：当我单击编辑时，用户为空

Question

当我想单击管理页面上的“编辑用户信息”时，我遇到了这个问题。但是，单击它后，我会看到： 问题似乎源于我的 UserForm.js:

'use client';
import EditableImage from "@/components/layout/EditableImage";
import { useState } from "react";


export default function UserForm({user,onSave}) {
    const [userName, setUserName] = useState(user?.name || '');
    const [image, setImage] = useState(user?.image || '');
    const [phone, setPhone] = useState(user?.phone || '');
    const [streetAddress, setStreetAddress] = useState(user?.streetAddress || '');
    const [postalCode, setPostalCode] = useState(user?.postalCode || '');
    const [city, setCity] = useState(user?.city || '');
    const [country, setCountry] = useState(user?.country || '')
    
    return (
    <div className="flex gap-4">
      <div>
        <div className="p-2 rounded-lg relative max-w-[120px]">
          <EditableImage link={image} setLink={setImage} />
        </div>
      </div>
      <form
        className="grow"
        onSubmit={ev =>
          onSave(ev, {
            name:userName, image, phone,
            streetAddress, city, country, postalCode,
          })
        }
      >
        <label>
          First and last name
        </label>
        <input
          type="text" placeholder="First and last name"
          value={userName} onChange={ev => setUserName(ev.target.value)}
        />
        <label>Email</label>
        <input
          type="email"
          disabled={true}
          value={user.email}
          placeholder={'email'}
        />
                   <label>Phone</label>
                <input type ="tel" placeholder="Phone number"
                value={phone} onChange={ev => setPhone(ev.target.value)} />
                    <label>Street address</label>
                <input type ="text" placeholder="Street address"
                value={streetAddress} onChange={ev => setStreetAddress(ev.target.value)} />
                
                <div className="flex gap-2">
                    <div>
                    <label>Postal code</label>
                    <input type ="text" placeholder="Postal code"
                    value={postalCode} onChange={ev => setPostalCode(ev.target.value)} /> 
                    </div>
                    <div>
                    <label>City</label>
                    <input  type ="text" placeholder="City"
                    value={city} onChange={ev => setCity(ev.target.value)}/>
                    </div>
                </div>
                <label>Country</label>
                <input type ="text" placeholder="Country"
                value={country} onChange={ev => setCountry(ev.target.value)}/>

                <button type ="submit">Save</button> 
                </form>
                
            </div>
       
    )
}

后端代码： src pp\users[id]\page.js:

'use client';
import {UserTabs} from "@/components/layout/UserTabs";
import {useProfile} from "@/components/UseProfile";
import UserForm from "@/components/layout/UserForm";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";

export default function EditUserPage(){
    const {loading,data} =useProfile();
    const [user, setUser] =useState(null);
    const {id} = useParams();

    useEffect(() => {
        fetch('/api/users').then(res => {
          res.json().then(users => {
            users.find(u => u._id === id);
            setUser(user);
          });
        })
      }, []);

    function handleSaveButtonClick(ev, data){

    }

    
    if(loading){
        return 'Loading users info...'
    }

    if(!data.admin){
        return 'Not an admin'
    }
    
    return (
        <section className="mt-8 mx-auto max-w-2xl ">
            <UserTabs isAdmin={true} />
            <div className="mt-8">
              <UserForm user={user} onSave={handleSaveButtonClick}/>
            </div>
        </section>
    )
}

src pp\users\page.js:

'use client';

import { useProfile } from "@/components/UseProfile";
import  {UserTabs}  from "@/components/layout/UserTabs";
import { useEffect, useState } from "react";
import Link from "next/link";

export default function UsersPage(){
   
    const[users, setUsers] =useState([]);
    const {loading,data} =useProfile();
    

    useEffect(() => {
        fetch('/api/users').then(response => {
          response.json().then(users => {
            setUsers(users);
          });
        })
      }, []);

    if(loading){
        return 'Loading user info...';
    }

    if(!data.admin){
        return 'not an admin';
    }
    
    return(   
        <section className="max-w-2xl mx-auto mt-8"> 
        <UserTabs isAdmin={true}/>
        <div className="mt-8">
            {users?.length >0 && users.map(user =>(
                <div className="bg-gray-100 rounded-lg mb-2 p-1 px-4 flex 
                items-center gap-4">
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 grow">
                        <div className="text-gray-900">
                            {!!user.name && <span>{user.name}</span>}
                            {!user.name && (<span className="italic">No name</span>)}
                        </div>
                    <span className="text-gray-500">{user.email}</span> 
                    </div>
                    <div>
                        <Link className="button" 
                        href={'/users/'+user._id}>Edit</Link>
                    </div>    
                    
                </div>
            ))}
        </div>
        </section>
    );
}

代码似乎在我的个人资料选项卡上运行良好，并且只有当我尝试单击用户选项卡中的编辑按钮时才会出现问题： 个人资料页面中的工作代码图片：

Answer 1

src pp\users[id]\page.js 中有一个拼写错误。

setUser(user);

一定是

setUser(users);

谢谢 我们做最好的4你