Reactjs Nextjs-错误：对象作为React子对象无效（找到：[对象承诺]）

我在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" )
 }

console语句返回良好，但会触发此错误：

错误：对象作为React子对象无效（找到：[对象承诺]）

---

我理解，通过承诺是触发错误的原因，但我不确定此时如何绕过它。因此，我请求帮助。

类型的原因React child不包括类型对象承诺。我建议您使用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;
}

函数myIP（）{
const router=useRouter（）
const{id}=router.query；//解构路由器对象
const[ip，setIp]=useState（）；
useffect（（）=>{
returnIP（）
。然后（（ip）=>{
log（“它是一个IP--”+IP）；
常量组件P=
{id}与IP{IP}
;
setIp（组件IP）
返回组件；
})
.catch（错误=>“错误”）
}, [])
返回ip；
}

HI Vieta，我能再问一个问题吗？我试图将“id”常量从动态路由传递到returnIP，但它没有定义。你知道为什么吗？使用的URL地址为/posts/102，文件名为[id].js，位于pages下的posts目录中。

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;
}