新创建的React组件无法显示正确信息问题排查

问题场景 #

父组件通过useState维护objectList，提供添加新对象的函数，遍历列表渲染子组件展示对象信息。控制台打印的状态是正确的，但实际渲染时，新组件会替换旧组件位置，且新组件显示旧组件的内容，和控制台状态不符。

父组件代码 #

const FatherComponent = (data) => {
    const [objectList, setObjects] = useState(data.objects)

    const addObject = useCallback(prevObjects => {
        setObjects([new Object(data.id, "", ""), ...objectList])
        data.id += 1
    }, [data])

    useEffect(() => {
        data.objects = objectList
        console.log(objectList)
    }, [objectList, data])

    return(
        {objectList.map((object) => (
                    <ChildComponent
                        object={object}
                        objectList={objectList}
                        setObjects={setObjects}
                    />
                ))}
    );
}

class Object {
    constructor(
        id,
        name,
        description) {
         this._id = id
         this._name = name
         this._description = description
     }

    //getters and setters
}

控制台输出（添加对象后的正确状态） #

0: Object { _id: 1, _name: "", _description: ""}
1: Object { _id: 0, _name: "name", _description: ""}

子组件代码 #

const ChildComponent = (object, objectList, setObjects) => {
    //后续会说明此处
    useEffect(() => {
        console.log(object)
    }, [])

    const [name, setName] = useState(object.name)

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

    const [description, setDescription] = useState(object.description)

    const handleDescription = (event) => {
        setDescription(event.target.value)
    }

    useEffect(() => {
        let newObjectList = [...objectList]
        let newObject = new Object(object.id, name, objective)
        let index = newObjectList.findIndex(objectComp => objectComp.id === test.id)

        newObjectList[index] = newObject

        setObjects(newObjectList)
    }, [name, description])

    return (
        <div>
            <input type='text' placeholder='Object name' className='nameTextBox'
                    value={name}
                    onChange={handleName}>
            </input>
            <textarea type='text' className='objectTextBox'
                value={description}
                onChange={handleDescription}>
            </textarea>
        </div>
    );
}

问题原因 #

1. 缺少唯一key属性：父组件map渲染子组件时未指定key，React无法区分组件实例，会复用旧组件导致显示混乱。
2. 子组件状态未同步props：子组件用useState(object.name)初始化本地状态，但该初始值仅在挂载时生效，父组件更新props后子组件本地状态不会自动同步。
3. 直接修改props对象：父组件中data.id += 1和data.objects = objectList直接修改传入的props，违反React单向数据流原则，引发不可预测的状态问题。
4. addObject闭包陷阱：useCallback中未使用函数式更新，而是直接引用当前objectList，闭包会捕获旧状态，导致添加对象时状态不一致。
5. 子组件props接收错误：函数组件的props是单个对象，子组件定义const ChildComponent = (object, objectList, setObjects)属于语法错误，需解构props。
6. 子组件语法与依赖错误：子组件中objective、test.id为未定义变量；useEffect依赖数组缺失objectList、object.id，会使用旧的列表引用。

修复方案 #

父组件修复 #

const FatherComponent = ({ data }) => {
    // 初始化时创建副本，避免直接修改传入的data
    const [objectList, setObjects] = useState([...data.objects])
    // 用useRef维护id，避免直接修改props的data.id
    const idRef = useRef(data.id)

    const addObject = useCallback(() => {
        // 函数式更新，确保使用最新状态
        setObjects(prevObjects => [
            new Object(idRef.current, "", ""),
            ...prevObjects
        ])
        idRef.current += 1
    }, [])

    useEffect(() => {
        // 如需同步回父组件，通过回调函数而非直接修改props
        // 示例：data.onChange(objectList)
        console.log(objectList)
    }, [objectList])

    return (
        <>
            <button onClick={addObject}>添加对象</button>
            {objectList.map((object) => (
                <ChildComponent
                    key={object._id} // 添加唯一key
                    object={object}
                    setObjects={setObjects}
                />
            ))}
        </>
    );
}

子组件修复 #

const ChildComponent = ({ object, setObjects }) => {
    // 从props的object中获取初始值
    const [name, setName] = useState(object._name)
    const [description, setDescription] = useState(object._description)

    // 当props的object变化时，同步本地状态
    useEffect(() => {
        setName(object._name)
        setDescription(object._description)
    }, [object])

    const handleName = (event) => {
        const newName = event.target.value
        setName(newName)
        // 直接更新父组件状态，减少状态同步问题
        setObjects(prev => prev.map(item => 
            item._id === object._id 
                ? {...item, _name: newName} 
                : item
        ))
    }

    const handleDescription = (event) => {
        const newDesc = event.target.value
        setDescription(newDesc)
        setObjects(prev => prev.map(item => 
            item._id === object._id 
                ? {...item, _description: newDesc} 
                : item
        ))
    }

    return (
        <div>
            <input 
                type='text' 
                placeholder='Object name' 
                className='nameTextBox'
                value={name}
                onChange={handleName}
            />
            <textarea 
                className='objectTextBox'
                value={description}
                onChange={handleDescription}
            />
        </div>
    );
}

优化建议 #

• 尽量避免子组件维护本地状态，直接通过父组件setObjects更新，减少状态不同步风险。
• 将Object类替换为普通对象（如{ _id: id, _name: name, _description: description }），避免类实例带来的引用问题。
• 不要直接修改props对象，如需同步状态给父组件，通过回调函数实现。

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