ReactJS子组件接收Props后本地State未更新问题求助

你的问题出在子组件的本地状态初始化逻辑：useState(error)仅在组件首次挂载时执行一次，后续父组件传递的error prop发生变化时，不会自动同步到errorState。

要解决这个问题，需要通过useEffect监听error prop的变化，在prop更新时主动更新本地状态：

import { useState, useEffect } from "react"


const ApiMultiComboNew = (props) => {
    const { error,...nprops } = props;
    const [errorState, setErrorState] = useState(error)

    // 监听error prop变化，同步更新本地状态
    useEffect(() => {
        setErrorState(error);
    }, [error])

    return <>
        <span>Passed error prop: {error}</span><br /><br />
        <span>Local Error State:  {errorState}</span>
    </>
}
const App = () => {
    const [formState,setFormState] = useState({})    
    const handleClick = (e) => {        
        setFormState(ps=>({...ps,recipients:"This Error Should Show Up"}))        
    }
    return (
        <div style={{width: "500px",height:"200px",border:'1px solid #000',padding:"8px",backgroundColor:"lightblue",margin:"0 auto"}}>
            <div>
                <ApiMultiComboNew error={formState.recipients || ""} />
            </div> 
            <button onClick={handleClick}>Press To Set The Error!</button>
        </div>
    )
}

关键说明： #

• useEffect的依赖数组中加入error，确保每次error prop的值改变时，都会执行回调函数更新errorState
• 如果你的业务场景不需要维护本地状态，也可以直接使用error prop，完全省去errorState，这样更简洁

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