Nextjs - Error: Objects are not valid as a React child (found: [object Promise])

Question

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

这是我的代码：

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

控制台语句return很好，但是触发了这个错误：

错误：Objects 作为 React child 无效（找到：[object Promise]）。

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

Answer 1

React 子类型的原因不包括类型对象 Promise。我建议你应该使用 useState 来 return 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;
}

Nextjs - Error: Objects are not valid as a React child (found: [object Promise])

Nextjs - Error: Objects are not valid as a React child (found: [object Promise])

reactjs

server-side-rendering

next.js