Nextjs - 错误：对象作为 React 子对象无效（找到：[object Promise]）

Question

我在 Nextjs 中使用动态路由，但我希望在进行服务器端渲染之前获取客户端的 IP，以便为社交媒体共享添加标头。

这是我的代码：

 function myIP() {
    const router = useRouter()
    const { id } = router.query; // Destructuring our router object
    
    return returnIP()
        .then((ip) => {
            console.log("It an IP -- " + ip);
            return (
                <>
                <h2>
                  {id} with IP {ip}
                </h2>
                </>
            );
        })
    .catch(error => "Error" )
 }

和

 async function returnIP () {

    let ipresponse = await axios.get(ipurl)
              .catch(errors => console.log(errors));
    let ip = await ipresponse.data;

    console.log("IP is -- : " + ip)
    return ip;
 }

控制台语句返回正常，但触发了此错误：

错误：对象作为 React 子对象无效（找到：[object Promise]）。

我知道通过 Promise 是触发该错误的原因，但我现在不确定如何解决它。 所以我在寻求帮助，拜托。

Answer 1

React child 类型不包括类型对象 Promise 的原因。 我建议你应该使用State来返回Ip。 例子：

function myIP() {
    const router = useRouter()
    const { id } = router.query; // Destructuring our router object
    const [ip, setIp] = useState(<div/>);

    useEffect(() => {
        returnIP()
            .then((ip) => {
                console.log("It an IP -- " + ip);
                const componentIp = <>
                    <h2>
                        {id} with IP {ip}
                    </h2>
                </>;

                setIp(componentIp)
                return componentIp;
            })
            .catch(error => "Error" )
    }, [])

    return ip;
}