对象作为尝试返回 swal 的 React 子项（找到：[object Promise]）无效

Question

我正在尝试在 state 未定义时进行条件渲染，并且我想向用户展示他尚未选择客户端的甜蜜提醒。 但我收到此错误：

对象作为 React 子级无效（找到：[object Promise]）。 如果您打算渲染一组子项，请改用数组。

片段：

const location = useLocation();

const ClientNotSelected = () => {
    return (
        <div>
            {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire(
                            'Deleted!',
                            'Your file has been deleted.',
                            'success'
                        )
                    }
                })

            }

        </div>

    )
}


if (location.state === undefined) {
    return <ClientNotSelected />;
} 

Answer 1

无需创建和渲染组件来触发警报。

您可以将Swal.fire()移动到您的 if 语句中。

像这样：

if (location.state === undefined) {
  Swal.fire({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
    confirmButtonText: "Yes, delete it!",
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire("Deleted!", "Your file has been deleted.", "success");
    }
  });
}

Answer 2

我是如何解决的：

我创造了

const [clientSelected, setClientSelected] = useState(false);

我在useEffect中检查了它，里面有swal.fire它没有给出任何问题/错误

useEffect(()=>{
    if (location.state === undefined){
        setClientSelected(false);
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'Ok'
        }).then((result) => {
            if (result.isConfirmed) {
                history.goBack();
            }
        })
    }
    else{
        setClientSelected(true);
    }
})

下面我继续使用相同的条件，但检查新的 var clientSelected

if (!clientSelected) {
    return <h1>Select a client</h1>;
} else {
    return <Component />;
}