Javascript 快速发送自定义道具进行反应，导致道具闪烁并在渲染时消失_Javascript_Node.js_Reactjs_Express_React Router

Javascript 快速发送自定义道具进行反应，导致道具闪烁并在渲染时消失

javascript node.js reactjs express

Javascript 快速发送自定义道具进行反应，导致道具闪烁并在渲染时消失,javascript,node.js,reactjs,express,react-router,Javascript,Node.js,Reactjs,Express,React Router,我有一个server.js文件，它应该从服务器获取一些数据，并将其保存在一个名为customP的对象中。为了让事情变得更简单，我正在尝试传递一个常量字符串和RouterContext RenderOps： server.js markup = renderToString(<RouterContext {...renderProps} createElement={(Component, props) => {return <Component customP={"boaz"}

我有一个server.js文件，它应该从服务器获取一些数据，并将其保存在一个名为customP的对象中。为了让事情变得更简单，我正在尝试传递一个常量字符串和RouterContext RenderOps：

server.js

markup = renderToString(<RouterContext {...renderProps} createElement={(Component, props) => {return <Component customP={"boaz"} {...props} />;}} />);

return res.render('index', {markup});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vetevo dashboard</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="main"><%- markup -%></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

const routes = (
  <Route path="/dashboard" component={Layout}>
    <IndexRoute foo="bar" component={DashboardPage}/>
    <Route path="*" component={NotFoundPage}/>
  </Route>
);

markup=renderToString（{return；}}/>）；
返回res.render（'index'，{markup}）；

index.ejs

markup = renderToString(<RouterContext {...renderProps} createElement={(Component, props) => {return <Component customP={"boaz"} {...props} />;}} />);

return res.render('index', {markup});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vetevo dashboard</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="main"><%- markup -%></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

const routes = (
  <Route path="/dashboard" component={Layout}>
    <IndexRoute foo="bar" component={DashboardPage}/>
    <Route path="*" component={NotFoundPage}/>
  </Route>
);


vetevo仪表板

routes.js

markup = renderToString(<RouterContext {...renderProps} createElement={(Component, props) => {return <Component customP={"boaz"} {...props} />;}} />);

return res.render('index', {markup});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vetevo dashboard</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="main"><%- markup -%></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

const routes = (
  <Route path="/dashboard" component={Layout}>
    <IndexRoute foo="bar" component={DashboardPage}/>
    <Route path="*" component={NotFoundPage}/>
  </Route>
);

const路由=(
);

最后是最重要的部分：仪表板页面组件

  constructor(props) {
    super(props);
    console.log(props.customP);
  }

  render() {
    //console.log(this.props);
    return (
      <div className="dashboard">
        <h2>This is the component: {this.props.customP}</h2>
        <h1>SA</h1>
      </div>
    );
  }

构造函数（道具）{
超级（道具）；
console.log（props.customP）；
}
render（）{
//console.log（this.props）；
返回(
这是组件：{This.props.customP}
沙特阿拉伯
);
}

奇怪的是，customP道具显示了一毫秒，然后消失了。不仅如此，我在构造函数的console.log中得到了正确的值。我认为这导致了另一个渲染正在发生或渲染正在崩溃的结论。我找不到原因，但是componentDidMount（）也没有响应

更新

console.log适用于componentDidMount（），但此处未定义props和state，而在console.log-in构造函数中，它们的显示方式与应有的完全相同

任何帮助都将不胜感激。

控制台。登录componentDidMount
工作吗？@SunnyRGupta是的，检查componentDidMount
的更新。您需要访问props
作为此.props
。如果设置正确，您能否共享一个JSFiddle/JSBin链接，让我们能够看到确切的问题？