javascript - 父组件重新渲染后，React 子组件状态丢失

Question

我正在为父/子组件使用 React 钩子(Hook)。

现在我的父组件 (companyIcon) 中有状态，我需要根据子组件中的一些验证来更新它。我将 validationCallback 作为回调函数传递给子组件，并根据我从子组件获得的值更新我的父状态。

现在的问题是在我更新父状态后，子组件中的状态值被重置。我在下面的实现中做错了什么？

function ParentComp(props) {
    const [companyIcon, setCompanyIcon] = useState({ name: "icon", value: '' });

    const validationCallback = useCallback((tabId, hasError) => {
        if (hasError) {
            setCompanyIcon(prevItem => ({ ...prevItem, value: 'error'}));
// AFTER ABOVE LINE IS EXECUTED, my Child component state "myAddress" is lost i.e. it seems to reset back to empty value.
        }
    }, []);
    

    const MyChildCmp = (props) => { 
        const [myAddress, setmyAddress] = useState('');

        useEffect(() => {
                if (myAddressExceptions.length > 0) {
                    props.validationCallback('MyInfo', true);
                } else {
                    props.validationCallback('MyInfo', false);
                }
            }, [myAddressExceptions])

    
        const handlemyAddressChange = (event) => {        
            //setmyAddress(event.target.value);
            //setmyAddressExceptions(event.target.value);
            console.log(myAddressExceptions);
        }

        return (
            <>
                <div className="row" style={{ display: 'flex', flexDirection: 'row', width: '1000px'}}>
                        <div style={{ width: '20%'}}>
                            <FormField 
                                label='Company Address' 
                                required
                                helperText={mergedErrorMessages(myAddressExceptions)}
                                validationState={
                                    myAddressExceptions[0] ? myAddressExceptions[0].type : ''
                                }
                            >
                                <Input id='myAddress'
                                    value={myAddress}
                                    //onChange={handlemyAddressChange}
                                    onChange={({ target: { value } }) => {
                                        validateInputValue(value);
                                    }}
                                    onBlur={handleBlur}
                                    inputProps={{maxLength: 9}} />
                            </FormField>
                        </div>
                </div>
            </>
        ); 
    }

    return (
        <div className="mainBlock">
            Parent : {companyIcon}
            {displayMyChild && <MyChildCmp validationCallback={validationCallback}/>}
        </div>
    )
}

export default withRouter(ParentComp);

Answer 1

以下是您可能会在 child 中丢失状态的一些原因(可能还有更多，但这些最适用于您):

    {displayMyChild && <MyChildCmp validationCallback={validationCallback}/>}

如果在某一时刻 displayMyChild 为真，则为 假，这意味着组件 MyChildCmp 将被卸载，因此它的所有状态都将消失。

但是现在，即使您没有那个条件并始终呈现 MyChildCmp，您仍然会遇到类似的问题，这是因为您定义了 MyChildCmp 在 另一个组件中。当你这样做时，在父组件的每次渲染中，函数 MyChildCmp 被重新创建，并且 reconciliation React 的算法认为你在下一次渲染时渲染了一个不同的组件类型，所以它会破坏组件实例。将该组件的定义移到父组件之外。