React用户列表组件动态内容未渲染问题求助

我正在开发一个小型用户列表功能，支持输入用户信息并添加至列表。预期首次渲染时显示“No users”，后续可展示新增用户。但负责条件渲染逻辑的Users.js组件无法渲染动态内容，既不显示“No users”，也无法展示新增的用户列表，请求帮助。

App.js #

import React, { useState } from 'react';
import Users from './Components/Users/Users';
import NewUser from './Components/NewUser/NewUser';

function App() {
  const [users, setUsers] = useState([]);
  console.log(users);

  const addUser = (user)=>{
      setUsers((prevUsers)=>{
        return ([user,...prevUsers]);
      })
  }
  return (
    <div>
        <NewUser addUser={addUser}/>
        <Users usersList={users}/>
    </div>
  );
}

export default App;

NewUser.js（用于输入新用户数据） #

import React, { useState } from "react";
import './NewUser.css'

const NewUser = (props)=>{

    const [name, setName] = useState('');
    const [userAge, setUserAge] = useState('');

    const nameChangeHandler = (event)=>{
        setName(event.target.value);
    }

    const ageChangeHandler = (event)=>{
        setUserAge(event.target.value);
    }

    const submitHandler = (event)=>{
        event.preventDefault();

        const user = {
            username: name,
            age: +userAge,
        }

        props.addUser(user);
        setName('');
        setUserAge('');

    }

    return (
            <form onSubmit={submitHandler}>
                <div>
                    <div className="inputs">
                        <label>Username</label>
                        <input type="text" value={name} onChange={nameChangeHandler}/>
                    </div>
                    <div>
                        <label>Age (Years)</label>
                        <input type="text" value={userAge} onChange={ageChangeHandler}/>
                    </div>
                </div>
                <div>
                    <button type="submit" >Add User</button>
                </div>
            </form>
    );
}

export default NewUser;

Users.js（动态内容未渲染的组件） #

import React from "react";
import UserDetail from './UserDetail';

const Users = (props) =>{
    console.log(props.usersList); 
    
    return (
        <div>
            {
                (props.userList?.length === 0) ?
                    <h2>No Users</h2>
                :<ul>
                    {props.userList?.map((userListUser)=>(
                        <UserDetail userData={userListUser}/>
                    ))}
                </ul>
            }
        </div>
    )
}

export default Users;

UserDetail.js（展示单个用户数据的组件） #

import React from "react";

const UserDetail = (props)=>{
    console.log(props.userData.username,props.userData.age);

    return (
        <div>
            <h2>{props.userData.username} ({props.userData.age} years old)</h2>
        </div>
    )
}

export default UserDetail;

故障原因 #

核心问题是Props参数名拼写不一致：

• App.js中传递给Users组件的props是usersList（带s）
• 但Users.js内部始终用userList（不带s）读取数据，导致props.userList始终为undefined，条件渲染的判断逻辑完全失效。

修复方案 #

修改Users.js中的props读取名称，统一为usersList，同时给map循环添加唯一key（避免React警告）：

修复后的Users.js

import React from "react";
import UserDetail from './UserDetail';

const Users = (props) =>{
    console.log(props.usersList); 
    
    return (
        <div>
            {
                props.usersList.length === 0 ?
                    <h2>No Users</h2>
                :<ul>
                    {props.usersList.map((user)=>(
                        <UserDetail key={user.username + user.age} userData={user}/>
                    ))}
                </ul>
            }
        </div>
    )
}

export default Users;

额外优化说明 #

1. 因为App.js中初始化的users是数组，所以不需要可选链?.，直接判断props.usersList.length === 0即可
2. map循环必须添加唯一key，这里用username + age组合作为临时key（实际项目建议用唯一id）

内容的提问来源于stack exchange，提问作者Karthik Panicker