布尔状态变量更改导致父组件消失？

【问题标题】：boolean state variable change causes parent component to disappear?布尔状态变量更改导致父组件消失？
【发布时间】：2022-06-16 00:27:17
【问题描述】：

我目前拥有的是一个名为 WhatDo.tsx 的父组件，它有一个按钮可以打开一个名为 AddToWardrobe.tsx 的子组件，它目前只是一个要填写的表单。为此，我使用了 { boolean ? （显示 AddToWardrobe 组件）：（显示 按钮 以打开组件）}。但是，当我单击该按钮时，并没有打开 AddToWardrobe 组件，而是页面中的所有内容都消失了，包括 WhatDo 组件。

这是 WhatDo.tsx 的函数（请注意，未来按钮有两个占位符）：

export default function WhatDo() {
    const [showATW, setShowATW] = useState(false);


    return(
        <div className="WhatDo">

            <div className="ActionNavText">
                What would you like to do? 
            </div>

            <div className="ActionNavButtons">
                <button id="actionbutton">placeholder</button>
                
                <div className="Show__ATW">
                {showATW? 
                <div className = "ATW__shown">
               <AddToWardrobe onSubmit={postNewItem}/>
               <button onClick ={() => setShowATW(false)}>Nvm!</button>
               </div>
               :
                <button id="actionbutton" onClick={() => {setShowATW(true)}}>Add to your Wardrobe</button>
                }
                </div>
                <button id="actionbutton">placeholder</button>
            </div>

            <div className="SignOutButton">
                <button onClick={signOut}>sign out?</button>
            </div>

        </div>
    )
}

这是 AddToWardrobe.tsx 的函数：

interface Props {
    onSubmit:(Item: Item) => void;
}

export default function  AddToWardrobe({onSubmit}: Props) {
    const [itemType, setItemType] = useState<string[]>([]);
    const [itemPrinted, setItemPrinted] = useState(false);
    const [itemColor, setItemColor] = useState<string[]>([]);
    const [secondaryColor, setSecondaryColor] = useState<string[]>([]);
    //type check boxes
    const [accessoryBox, setAccessoryBox] = useState(false);
    const [topBox, setTopBox] = useState(false);
    const [bottomBox, setBottomBox] = useState(false);
    const [shoeBox, setShoeBox] = useState(false);


    const handleTypeSet = (e: any) => {
        const typeValue = e.target.value;
        
        // check for item type
        if(typeValue === "Accessory") {
            setItemType(e.target.checked);
        }
        if(typeValue === "Top") {
            setItemType(e.target.checked);
        }
        if(typeValue === "Bottom") {
            setItemType(e.target.checked)
        }
        if(typeValue === "Shoes") {
            setItemType(e.target.checked);
        }
    }

    //check whether or not printed
    const handlePrintChange = (e: any) => {
        const printValue = e.target.value;

        if (printValue === true) {
            setItemPrinted(e.target.checked);
        } // else false, I guess? 
    }

    function handleSubmit(e:FormEvent) {
        e.preventDefault();
        const CurrentItem: Item = {
            type: itemType,
            printed: itemPrinted,
            primaryColor: itemColor,
            secondaryColor: secondaryColor,
        }
        onSubmit(CurrentItem);
        //probably here the addtowardrobe component will close/return to main screen
        // display a message that says if the item was added successfully or not
    }

    return (
        <div className = "AddToWardrobe">

            <form onSubmit={handleSubmit}>
                <label className = "ATW__question">What would you like to add?</label>
                <div className="ATW__input">
                    <input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox}>Accessory</input>
                    <input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox}>Top</input>
                    <input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}>Bottom</input>
                    <input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}>Shoes</input>
                </div>

                <label>Is this item printed, textured, or solid?</label>
                <div className="ATW__primarycolor">
                    <input type="checkbox"></input>
                </div>

                <input className='submit' type="submit"value ="Submit"/>

            </form>
        </div>
    )
}

可能值得注意的是，AddToWardrobe 的表单也没有像预期的那样完整，但我觉得点击按钮应该呈现一些东西，或者至少不是让整个父组件消失！

【问题讨论】：

• 我相信有一些错误导致您的应用程序崩溃，如果有的话请检查控制台吗？

标签： javascript reactjs boolean parent