将三元运算符延迟检查React状态直到useEffect Hook完成

问题描述

我希望我以正确的方式表述我的问题。这就是我正在做的事情。

我像下面的代码一样设置了三元运算符。它会检查状态是否存在，如果状态不存在，则会打开模态表单。

   { !selectPet && selectClient ?
                <Modal>
                    <Form>
                       <form stuff/>
                    </Form>
                </Modal> 
              : null 
   }

像这样在useEffect挂钩中设置

selectPet。

function clientsPets() {
        if (selectClient !== undefined) {
            API.getClientPets(selectClient._id)
                .then(res => {
                    if (res.length > 0) {
                        setSelectPet(res) // Right here is where the selectPet is being set
                        setActivePet(res[0])
                        API.getPetSessionsByPetId(res[0]._id)
                            .then(res => setTrainingSessions(res))
                            .catch(err => console.log(err))
                    } else {
                        return
                    }
                })
                .catch(err => console.log(err))
        } else { history.push("/") }
    }

    useEffect(() => {
        clientsPets()
    },[])

我遇到的麻烦是，当页面第一次加载Modal时，在useEffect完成之前显示不到一秒钟。逻辑上我不确定如何解决此问题。我可以在检查selectPet状态之前设置某种时间间隔，还是有更好的方法来解决此问题？

解决方法

selectPet和selectClient的初始状态值是什么？如果您不希望在API调用完成且状态值已更新之前就出现模态，只需确保设置了初始值，以使三元数将跳到“ else”块并呈现{{1} }而不是模式。

请记住，由于三元组中的第一个条件是null，因此!selectPet的初始值必须是“真”，或者selectPet的初始值必须是虚假的，以便跳至三元组的“ else”块。

,

您需要一个说明您是否具有模态信息的状态项。目前，您仅基于!selectPet && selectClient展示它，而代码selectClient是一个对象。

例如：

const [clientInfo,setClientInfo] = useState(null);

然后

{!selectPet && clientInfo ?
    <Modal>...</Modal>
}

使用clientInfo中的Modal。

从模态所需的ajax调用中获得客户信息时，请致电setClientInfo(/*...*/)（这可能意味着使clientsPets返回信息的承诺）。