React Hooks 子组件更新父组件列表状态数据丢失问题

列表只剩第一个元素的问题和useEffect无关，是三个典型的React写法错误共同导致的：

• 直接修改state中的对象：在setBikeType的map逻辑中直接给匹配到的bike对象赋值type属性，违反React state不可变原则，会导致状态更新追踪异常。
• 将JSX元素存储在state中：单独维护的bikeInputs state存的是组件实例，新增组件时绑定的回调、参数都是闭包捕获的旧渲染周期值，除了初始的第一个组件，后续新增的组件拿到的永远是首次渲染时的旧状态引用（仅包含初始第一条自行车数据），触发更新时会直接用旧的单元素数组覆盖最新的多元素列表。
• 列表渲染使用数组索引作为key：增删列表项时会引发组件状态错位，进一步加剧更新异常。

完全删除单独维护bikeInputs的state，遵循React数据驱动视图的原则，直接基于bikes业务数据渲染输入组件，同时修正状态更新的不可变逻辑。

修正后的父组件代码 #

import { useState, useEffect } from 'react'
import BikeInput from './BikeInput' // 补全对应组件导入路径

const initialBike = {
    id: 0,
    type: "",
    ageRange: ""
};

function Donate() {
    const [bikes, setBikes] = useState([initialBike]);
    // 调试用的effect可保留，不影响业务逻辑
    useEffect(() => console.log(bikes), [bikes])

    // 修正：不可变更新，不直接修改原state对象
    const setBikeType = (bikeType, bikeId) => {
        setBikes(prevBikes => prevBikes.map(bike => 
            bike.id === bikeId ? {...bike, type: bikeType} : bike
        ))
    }

    // ageRange逻辑和type保持一致
    const setBikeAgeRange = (ageRange, bikeId) => {
        setBikes(prevBikes => prevBikes.map(bike => 
            bike.id === bikeId ? {...bike, ageRange: ageRange} : bike
        ))
    }

    const addBikeForm = (e) => {
        e.preventDefault();
        // 用函数式更新获取最新state值，避免闭包拿到旧值
        setBikes(prevBikes => {
            const newId = prevBikes.at(-1).id + 1
            return [...prevBikes, {id: newId, type: "", ageRange: ""}]
        })
    };

    return (
        <div className="bike-form-container donate-form-one">
            <p className="input-title">Bike Info.</p>
            {/* 直接基于业务数据渲染组件，无需存储JSX到state */}
            {bikes.map((bike) => (
                <div className="bike-input" key={bike.id}>
                    <BikeInput
                        bikeId={bike.id}
                        setBikeType={setBikeType}
                        setBikeAgeRange={setBikeAgeRange}
                    />
                </div>
            ))}
            <button className="add-bike-btn" onClick={addBikeForm}>
                <i className="fa-solid fa-circle-plus"></i> Add A Bike
            </button>
        </div>
    )
}

export default Donate

修正后的子组件代码 #

将原bikeIndex入参替换为数据唯一idbikeId，补全属性对应逻辑即可：

function BikeInput(props) {
    const { bikeId, setBikeType, setBikeAgeRange } = props
    return (
        <div className="input-container">
            <select 
                className="form-dropdown text-input"
                defaultValue="Type"
                onChange={e => setBikeType(e.target.value, bikeId)} 
            >
                <option disabled value="Type">Type</option>
                <option value="Mountain"> Mountain </option>
                <option value="Road"> Road </option>
                <option value="Cruiser"> Cruiser </option>
                <option value="Hybrid"> Hybrid </option>
                <option value="Three Wheel"> Three Wheel (Tricycle) </option>
            </select>
            {/* ageRange对应输入逻辑按相同规则调整 */}
        </div>
   )
}

export default BikeInput

• 不要把JSX元素存在state中：视图层直接基于state中的业务数据渲染即可，存储JSX到state极易触发闭包陷阱，拿到过期的回调、参数值。
• 状态更新必须遵循不可变原则：修改对象/数组类型的state时，要返回全新的对象/数组，不能直接修改原state上的属性，否则React无法正确追踪状态变化，会出现各类更新异常。
• 所有依赖前一个state值的更新逻辑，优先使用函数式更新（比如setBikes(prev => xxx)），避免闭包捕获旧state值导致计算错误。
• 列表渲染的key要使用每条数据的唯一id，不要用数组索引，避免增删列表项时出现组件状态错位问题。

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