Question

我正在尝试获取道具，以便在客户端显示，但没有显示。

逻辑是我尝试登录，并且登录失败时，它应该从查询对象获取新的道具。它更新得非常好，当我在 getInitialProps 异步方法上执行“ console.log”时，我可以看到更新。

但是客户端页面不会更新以显示当前值。下面是我的代码

Login.js

import Layout from '../components/layout'
import LoginPart from '../components/login'
import Link from 'next/link'
import {Component} from 'react'
import fetch from 'isomorphic-unfetch'
import jsHttpCookie from 'cookie';
import {withRouter} from 'next/router'

const Login = (props) => (
    <Layout>
        <div>
            <div id="page-banner-area" className="page-banner-area section">
                <div className="container">
                    <div className="row">
                        <div className="page-banner-title text-center col-xs-12">
                            <h2>Login</h2>
                        </div>
                    </div>
                </div>
            </div> 
            <!-- Problem >>> props.myprops shows nothing -->
            { "Modal value: "+ props.myprops }

            <!-- this is my Login Form part -->
            <LoginPart/>
       </div>
    </Layout>
)

Login.getInitialProps = async function({query}) {
   console.log("Initial property: "+ query.show)//this shows the updated value quite well
   return {myprops: query.show}
}

export default withRouter(Login)

Server.js

console.log("Login failed")

return app.render(req, res, '/login',{ show: "Badguy"})

Answer 1

getInitialProps是一个棘手的问题。 SSR只能在服务器中运行，而SSR只能在客户端中运行。

您正在从server传递queryString，因此客户端的withRoute无法使用它。

从服务器通过getInitialProps返回时，道具未在客户端更新

1 个答案: