React子组件中如何更新父组件状态？

React是单向数据流，子组件没法直接修改父组件的状态，得通过父组件传递回调函数的方式实现状态同步，具体改法如下：

1. 父组件（Blocks.js）修改点 #

• 新增处理子组件topic变更的函数handleTopicChange，根据block的id定位对应项并更新topic值
• 将该回调函数传给每个Block子组件
• 调整表单提交逻辑，确保提交时使用最新的blocks状态

修改后的Blocks.js代码：

const Blocks = ({ updateBlocks }) => {
    const [blocks, setBlocks] = useState([])

    useEffect(() => {
        const getBlocks = async () => {
            const blocksFromServer = await fetchBlocks()
            setBlocks(blocksFromServer)
        };

        getBlocks()
    }, []);

    const fetchBlocks = async () => {
        const res = await fetch("/api/getblocks")
        const data = await res.json()
        return data
    }

    // 新增：接收子组件传来的更新请求，修改对应block的topic
    const handleTopicChange = (blockId, newTopic) => {
        setBlocks(prevBlocks => 
            prevBlocks.map(block => 
                block.id === blockId ? {...block, topic: newTopic} : block
            )
        )
    }

    return (
        <form onSubmit={(e) => {
            e.preventDefault();
            updateBlocks(blocks); // 提交时传入最新的blocks数据
        }}>
            {blocks.map((block) => (
                <Block 
                    key={block.id} 
                    block={block} 
                    onTopicChange={handleTopicChange} // 传递回调函数给子组件
                />
            ))}

            <input type="submit" value="update"></input>
        </form>
    )
}

export default Blocks

2. 子组件（Block.js）修改点 #

• 删除子组件自身的topic状态，直接使用父组件传入的block.topic作为input的value
• 在input的onChange事件中，调用父组件传来的onTopicChange，传递当前block的id和新输入值

修改后的Block.js代码：

import React from "react"

const Block = ({ block, onTopicChange }) => {
    // 移除多余的本地topic状态

    return (
        <div className="block">
            <input 
                type="text" 
                name="topic" 
                value={block.topic} 
                onChange={(e) => {
                    // 触发父组件的回调，传递更新所需的id和新值
                    onTopicChange(block.id, e.target.value)
                }}
            />
            <h4>{block.start_time} - {block.end_time}</h4>
            <hr className="dashed" /> {/* 注意：React中需用className替代class */}
        </div>
    )
}

export default Block

关键逻辑说明 #

• 所有状态统一由父组件Blocks维护，子组件仅负责展示内容和触发修改事件
• 父组件使用setBlocks的函数式更新（prevBlocks => ...），确保每次更新都基于最新状态，避免旧值覆盖问题
• 子组件的input是受控组件，值完全由父组件状态决定，通过onChange通知父组件更新状态，实现双向同步

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