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

【问题标题】：Delay ternary operator from checking React State till useEffect Hook finishes延迟三元运算符检查 React 状态直到 useEffect Hook 完成
【发布时间】：2020-12-01 06:27:45
【问题描述】：

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

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

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

selectPet 像这样设置在 useEffect 钩子中。

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

【问题讨论】：

根据您的问题，您似乎为您的 selectClient 提供了一些初始值，请将其设为 null，您的问题将得到解决。

标签： javascript reactjs state conditional-operator use-effect

【解决方案1】：

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

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

【讨论】：

真棒@Ethin Lipkind 这是一个简单的修复谢谢。我不知道我在设置那个时在想什么。我应该按照真假来处理它，而不是检查状态的存在。

【解决方案2】：

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

例如：

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

然后

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

在Modal 中使用clientInfo。

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

【讨论】：

感谢您的回复，因为我第一次看到它，所以我最终遵循了 Ethan 上面所说的内容。但再次感谢您对问题的回答。