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

【问题标题】：React functional component un-mounts/mounts the parent component after setting stateReact 功能组件在设置状态后卸载/挂载父组件
【发布时间】：2021-10-08 00:47:04
【问题描述】：

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

父级中没有任何状态受到影响，但是，父级在图像更改后的一瞬间卸载并重新安装，这将每次将子级的 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"}
            />
        </>
    );
}

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

【问题讨论】：

他不能，只有你父母的父母可以卸载，我猜你的一个道具导致父母卸载，反正这个问题不完整，见How to create a Minimal, Reproducible Example
感谢您的评论@DennisVash，但是，我不同意我的问题不完整。正如我在原始问题中提到的那样，父级显然正在卸载/重新安装，并且父级中没有发生任何道具或状态更改。我发现并包含在下面的修复不包括对父级的单一更改。我只是通过包含一个包含状态变量的键来更改示例中显示的子函数。
您可以并且应该从父组件添加添加键
再次感谢@DennisVash，但我不明白从父组件添加“密钥”对这里有什么帮助。请详细说明...

标签： javascript reactjs react-functional-component rerender react-component-unmount

【解决方案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>
    );
}

【讨论】：