React.js中父组件数据无法传递到子组件问题排查

问题根源分析 #

你的子组件（EditUser）存在以下关键问题导致无法正确显示父组件传递的数据：

1. State初始化错误：直接将对象props.data转成字符串赋值给inputEmailValue，且错误使用props.email（父组件未传递该属性）初始化其他状态。
2. 未监听props更新：useState仅在组件挂载时初始化一次，父组件data更新后，子组件状态不会自动同步。
3. TextField配置错误：第一个TextField标题为"First Name"却绑定了邮箱相关的状态，字段对应关系混乱。

修改后的子组件代码 #

import React, { useState, useEffect } from "react";
import TextField from '../App/UIComponents/textField.jsx';
import useToken from '../App/useToken';
import Login from '../Login/Login.jsx';

export default function EditUser(props) {
    const { token, settoken } = useToken();
    const [inputEmailValue, setInputEmailValue] = useState('');
    const [inputFirstValue, setInputFirstValue] = useState('');
    const [inputLastValue, setInputLastValue] = useState('');
    
    // 监听props.data变化，同步更新子组件状态
    useEffect(() => {
        if (props.data) {
            setInputEmailValue(props.data.email || '');
            setInputFirstValue(props.data.firstName || '');
            setInputLastValue(props.data.lastName || '');
        }
    }, [props.data]);

    if(!token) {
        return <Login settoken={settoken} />
    }

    if (!props.showEditUser) {
        return null;
    }

    const handleInputEmailChange = (event) => {
        setInputEmailValue(event.target.value);
    };

    const handleInputFirstChange = (event) => {
        setInputFirstValue(event.target.value);
    };

    const handleInputLastChange = (event) => {
        setInputLastValue(event.target.value);
    };

    const handleOnClose = () => {
        props.onClose();
    };

    const handleOnClick = () => {
        //Code to handle edit of data
    };

    return (
        <div className='popup' name='edituser'>
            <div className='popup-content'>
                <div className='model-header'>
                    <h2 className='model-title'>Edit User</h2>
                </div>
                <div className='model-body'>
                    <TextField 
                        title="Email"
                        placeHolder="Enter email"
                        name="email"
                        inputValue={inputEmailValue}
                        handleInputChange={handleInputEmailChange} 
                        validate={false}
                        error="" 
                    />
                    <TextField 
                        title="First Name"
                        placeHolder="Enter first name"
                        name="firstName"
                        inputValue={inputFirstValue}
                        handleInputChange={handleInputFirstChange} 
                        validate={false}
                        error="" 
                    />
                    <TextField 
                        title="Last Name"
                        placeHolder="Enter last name"
                        name="lastName"
                        inputValue={inputLastValue}
                        handleInputChange={handleInputLastChange} 
                        validate={false}
                        error="" 
                    />
                </div>
                <div className='model-footer'>
                    <button onClick={handleOnClick} className="button" name='editBtn'>Edit User</button>
                    <button className='button' onClick={handleOnClose}>Close</button>
                </div>
            </div>
        </div>
    );
}

关键修改说明 #

• 同步props到状态：添加useEffect监听props.data，父组件数据更新时自动同步子组件输入框状态，确保弹窗打开时加载最新用户数据。
• 修正状态初始化：将状态初始化为空字符串，避免初始值错误，后续通过useEffect填充正确数据。
• 修复TextField配置：调整第一个TextField的标题为"Email"，绑定对应邮箱状态，确保每个输入框与正确数据字段关联。
• 容错处理：使用|| ''避免props.data字段为空时出现undefined。

可选优化建议 #

父组件可简化状态管理，无需单独维护inputEmailValue、inputFirstValue、inputLastValue，直接从data取值展示，减少冗余状态：

// 父组件中删除单独的inputXXXValue状态，直接使用data
return (
  <div>
    <h1>User Profile</h1>
    <table>
      <tbody>
        <tr>
          <td>Username</td>
          <td>{data.email}</td>
        </tr>
        <tr>
          <td>First Name</td>
          <td>{data.firstName}</td>
        </tr>
        <tr>
          <td>Last Name</td>
          <td>{data.lastName}</td>
        </tr>
      </tbody>
    </table>
    {/* 其他代码不变 */}
  </div>
)

内容的提问来源于stack exchange，提问作者Lee Rudd