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

Question

我希望我用正确的方式表达我的问题。这是我正在做的事情。

我设置了一个三元运算符，如下面的代码所示。它检查状态是否存在，如果状态不存在则打开模态窗体。

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

selectPet在useEffect hook中是这样设置的

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 状态之前设置某种间隔，还是有更好的方法来解决这个问题？

Answer 1

selectPet 和 selectClient 的初始状态值是多少？如果您不希望在 API 调用完成并且这些状态值已更新之前出现模态，只需确保设置初始值，以便三元将跳到“else”块并呈现null 而不是模态。

请记住，由于三元组中的第一个条件是 !selectPet，因此 selectPet 的初始值必须是“truthy”，或者 selectClient 的初始值必须是是假的，为了跳到三元的“其他”块。

Answer 2

您需要一个状态项来说明您是否拥有模态框的信息。目前，您完全基于 !selectPet && selectClient 显示它，其中您的代码 selectClient 是一个对象。

例如：

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

然后

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

在 Modal 中使用 clientInfo。

当您从 ajax 调用中获得模态需要的客户端信息时调用 setClientInfo(/*...*/)（这可能意味着使 clientsPets return 成为信息的承诺） .

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

Delay ternary operator from checking React State till useEffect Hook finishes

javascript

state

conditional-operator

reactjs

use-effect