React中子组件向父组件传值报错及最优方案咨询

一、当前错误的核心原因 #

你碰到的sendColor不是函数报错，本质是变量暂时性死区导致的：
父组件里先执行了循环创建rows数组的代码，但sendColor和sendName函数是在这之后才定义的——const声明的变量必须先定义再使用，所以传递给子组件的这两个props其实是undefined，子组件调用自然会报错。

另外还有个细节问题：子组件里调用sendColor(color)时，传的是更新前的state值，因为setColor是异步操作，state不会立即更新，所以应该直接传输入框的当前值，或者用useEffect监听state变化后再通知父组件。

二、修正当前实现的步骤 #

1. 调整父组件代码顺序 #

把sendColor、sendName函数移到创建rows数组之前：

// 先定义回调函数
const sendColor = (data) => {
    console.log(data)
}

const sendName = (data) => {
    console.log(data)
}

// 再生成子组件列表
const rows = []
for (let i = 0; i < rewards; i++) {
    rows.push(<ObjectRow key={i} num={i} sendColor={sendColor} sendName={sendName} />);
}

// 表单部分保留
<form onSubmit={onsubmit}>
    {rows}
    <div className='flex justify-center'> 
        <button className={`${rewards > 0 ? 'bg-red-700 w-4/12 rounded-md  p-2 font-normal text-lg text-white' : 'hidden'}`}>Submit</button>
    </div> 
</form>

2. 修正子组件的回调逻辑 #

两种可选方式：

方式一：直接传递输入框当前值

const handlechange1=(e)=>{
    const inputValue = e.target.value;
    setColor(inputValue);
    sendColor(inputValue); // 不用等state更新，直接传当前输入值
}

const handlechange2 = (e) => {
    const inputValue = e.target.value;
    setName(inputValue);
    sendName(inputValue);
}

方式二：用useEffect监听state变化后通知父组件（适合需要依赖state做额外处理的场景）

import React, { useState, useEffect } from 'react'

function ObjectRow({num,sendColor,sendName}) { 
    const [name, setName] = useState('')
    const [color,setColor]=useState('')

    // 监听color变化，通知父组件
    useEffect(() => {
        sendColor(color);
    }, [color, sendColor])

    // 监听name变化，通知父组件
    useEffect(() => {
        sendName(name);
    }, [name, sendName])

    const handlechange1=(e)=>{
        setColor(e.target.value);
    }

    const handlechange2 = (e) => {
        setName(e.target.value);
    }

    // 渲染部分不变
}

三、更优的实现方案：父组件统一管理状态 #

因为表单提交按钮在父组件，更高效的方式是让父组件统一维护所有奖励项的状态，子组件作为受控组件，不需要自己维护state，直接用父组件传递的值和更新回调：

父组件代码 #

import { useState } from 'react';
import ObjectRow from './ObjectRow';

function ParentComponent() {
    const [rewards, setRewards] = useState(2); // 假设rewards是动态生成的数量
    // 初始化奖励项数组，每个元素存name和color
    const [rewardItems, setRewardItems] = useState(
        Array.from({length: rewards}, () => ({name: '', color: ''}))
    );

    // 更新指定索引的奖励项数据
    const updateRewardItem = (index, key, value) => {
        setRewardItems(prev => {
            const newItems = [...prev];
            newItems[index] = {...newItems[index], [key]: value};
            return newItems;
        });
    };

    const onsubmit = (e) => {
        e.preventDefault();
        // 提交时直接用rewardItems数组即可
        console.log('要提交的所有奖励数据：', rewardItems);
    };

    return (
        <form onSubmit={onsubmit}>
            {rewardItems.map((item, index) => (
                <ObjectRow 
                    key={index} 
                    num={index} 
                    name={item.name}
                    color={item.color}
                    onNameChange={(value) => updateRewardItem(index, 'name', value)}
                    onColorChange={(value) => updateRewardItem(index, 'color', value)}
                />
            ))}
            <div className='flex justify-center'> 
                <button className={`${rewards > 0 ? 'bg-red-700 w-4/12 rounded-md  p-2 font-normal text-lg text-white' : 'hidden'}`}>Submit</button>
            </div> 
        </form>
    );
}

子组件代码 #

import React from 'react';

function ObjectRow({num, name, color, onNameChange, onColorChange}) { 
    return (
        <>
            <div className='text-xl font-semibold text-violet-700'>Reward{num+1}</div>
            
            <label>Reward Name</label>
            <input 
                type='text'
                name="rewardName" 
                onChange={(e) => onNameChange(e.target.value)}
                value={name} 
                className='bg-slate-400 my-4  mx-2'
            />                                  
            
            <label>Reward Color</label>
            <input 
                type='text' 
                name="rewardColor"
                onChange={(e) => onColorChange(e.target.value)} 
                value={color}
                className='bg-slate-400 my-4  mx-2'
            />              
            
            <hr /> 
        </>
    );
}

export default ObjectRow;

这种方案的优势：

• 父组件统一掌控所有表单数据，提交时直接拿rewardItems即可，不用分散收集
• 子组件变成纯展示/交互组件，逻辑更清晰，复用性更强
• 避免了子组件单独维护state带来的同步问题

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