React中如何从子组件更新父组件的Prop值？

核心问题点 #

1. information并非状态变量：用let声明的普通数组，组件每次渲染都会重新初始化，输入内容无法持久化，也无法触发useEffect更新guess。
2. 子组件未回传输入值：自定义Input组件仅维护内部character状态，未将输入字符传递给父组件，导致父组件无法更新对应数组项。
3. useEffect依赖无效：普通数组每次渲染都是新引用，且因information不是state，内容根本不会更新，依赖完全起不到作用。

修改后的代码 #

父组件（Body.js）

import React, { useState, useEffect } from 'react'
import Input from './Input'
const makeWords = require('make-words')

function Body() {
    const [word, setWord] = useState(makeWords.getWordByLength(5))
    // 将information改为状态变量，持久化存储输入内容
    const [information, setInformation] = useState(['','','','',''])
    const [guess, setGuess] = useState('')

    // 当information数组更新时，自动拼接成完整字符串存入guess
    useEffect(() => {
        setGuess(information.join(''))
    }, [information])

    // 定义更新数组指定位置的方法，传递给子组件
    const updateInformation = (index, value) => {
        // 不可直接修改原状态数组，需创建新数组后更新
        const newInfo = [...information]
        newInfo[index] = value.slice(-1) // 确保只保留单个字符
        setInformation(newInfo)
    }

    return (
        <div>
            <h1 className='secret-word'>{word}</h1>
            {/* 给每个Input组件传递当前值、更新回调及索引 */}
            <Input className='letter-guess' value={information[0]} onUpdate={(val) => updateInformation(0, val)} />
            <Input className='letter-guess' value={information[1]} onUpdate={(val) => updateInformation(1, val)} />
            <Input className='letter-guess' value={information[2]} onUpdate={(val) => updateInformation(2, val)} />
            <Input className='letter-guess' value={information[3]} onUpdate={(val) => updateInformation(3, val)} />
            <Input className='letter-guess' value={information[4]} onUpdate={(val) => updateInformation(4, val)} />
        </div>
    )
}

export default Body

子组件（Input.js）

import React from 'react'

// 子组件改为受控组件，状态由父组件统一管理
function Input({ className, value, onUpdate }) {
    function onChangeEvent(event) {
        const inputVal = event.target.value.slice(-1)
        // 调用父组件传递的回调，将输入值回传
        onUpdate(inputVal)
    }

    return (
        <input 
            type="text" 
            className={className} 
            value={value} 
            onChange={onChangeEvent}
            maxLength={1} // 直接限制输入长度为1，比slice更直观
        />
    )
}

export default Input

修改说明 #

1. 将information转为状态变量：React中只有状态变量的更新会触发组件重渲染并持久化数据，通过setInformation实现数组更新。
2. 子组件改为受控模式：移除子组件内部状态，直接使用父组件传递的value，输入变化时通过onUpdate回调将值回传给父组件，这是React父子组件状态交互的标准方式。
3. 优化输入限制：给input标签添加maxLength={1}属性，直接限制用户只能输入单个字符，逻辑更简洁。
4. 正确更新数组状态：更新数组时必须创建新数组（[...information]），不能直接修改原数组——React状态是不可变的，直接修改不会触发组件更新。

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