javascript - React 功能组件在设置状态后卸载/挂载父组件

Question

我有一个简单的功能组件，它通过一个在闭眼和睁眼图像之间切换的小按钮将密码字段切换为可见和不可见。

父级中没有任何状态受到影响，但是，父级在图像更改后的一瞬间卸载并重新安装，这每次都会将子级的 isVisible 状态重置为 false。下面是代码：

const Password = (props) => {
    
    const [isVisible, setIsVisible] = useState(false);
    
    const handleIsVisible = useCallback(() => setIsVisible(prev => !prev), []);

    return(
        <>
            <p className="EditProfileFieldLabel SubHeading">
                {(props.name === "password") ? "Password" : "Confirm Password"}
            </p>
            <div className="PasswordVisibleContainer">
                <button
                    className="PasswordVisibleBtn"
                    onClick={handleIsVisible}
                >
                    <img
                        src={(isVisible) ? passShowImg : passHideImg}
                        alt="Visible"
                    />
                </button>
            </div>
            <input
                className="Field LightGreenBG EditProfileFieldLong"
                name={props.name}
                placeholder="**********"
                onChange={props.handleOnChange}
                type={(isVisible) ? "text" : "password"}
            />
        </>
    );
}

谁能看到我遗漏的明显东西？我认为父母不应该因为孩子状态的变化而重新安装/重新渲染。

Answer 1

我向子元素的外部元素添加了一个键，并在该键中包含了 isVisible 状态变量，一切都很好。

*编辑：发生这种情况的原因是按钮正在提交表单。所以正确的解决方法是将按钮类型属性从其默认值“提交”更改为“按钮”。完成此操作后，不需要之前的修复，即添加带有状态变量的键。

下面的工作代码：

const Password = (props) => {
    
    const [isVisible, setIsVisible] = useState(false);
    
    const handleIsVisible = useCallback(() => setIsVisible(prev => !prev), []);

    return(
        <div key={`Password${props.name + isVisible}`}>
            <p className="EditProfileFieldLabel SubHeading SmlHeading">
                {(props.name === "password") ? "Password" : "Confirm Password"}
            </p>
            <div className="PasswordVisibleContainer">
                <button
                    className="PasswordVisibleBtn"
                    onClick={handleIsVisible}
                    type="button"
                >
                    <img
                        src={(isVisible) ? passShowImg : passHideImg}
                        alt="Visible"
                    />
                </button>
            </div>
            <input
                className="Field LightGreenBG EditProfileFieldLong"
                name={props.name}
                placeholder="**********"
                onChange={props.handleOnChange}
                type={(isVisible) ? "text" : "password"}
            />
        </div>
    );
}