Question

我很反应.Problem语句：从后端从json respose中选择所选值。在json中，selected = true的订阅必须在初始加载和屏幕上的导航中保持选择状态，而不管客户端/服务器如何侧：

面临问题：bundle.js：1警告：React尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户端所期望的。 React注入了新的标记以补偿哪些有效但你已经失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记在客户端或服务器上是不同的：（客户）on value =“1234”data-reactid =“290 （服务器）on value =“1233”data-reactid =“290

import React from 'react';


var restUtility = require('../utility/RestUtility');

export default class SummaryHeader extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

      value: []
    };
    this.state=this.props;
        this.handleChange = this.handleChange.bind(this);
    }




    handleChange(value) {
        this.setState(value);
        console.log('You have selected: ', value);
        this.setState({value});
        var rootUrl = restUtility.getRootURL();
        var requestUrl = rootUrl + '/rest/api/accountSummary/select';
        var request = new Request(requestUrl, {
            method: 'GET',
            // body: data, 
            headers: { 'subsID': ctnSelected }
        });
        event.preventDefault();

        fetch(request)
            .then(function () {
                console.log('Invoke rest API : ' + e.target.value);
            });
    }

    render() {
        var content;
        var ctnList = this.state.accountInfo[0].subsAssociations.map(function (subsAssociation, i) {
            if (subsAssociation.subscription.selected) {
                content=subsAssociation.subscription.serialNumber;
            }
            return <option key={i} >{content}</option>;

        });
        return (
            <div className="nameAreaWrapper">
                <div> <p style={{ fontSize: 13, float: "left" }}>Your here :</p> <p style={{ fontSize: 13, fontWeight: 700, marginRight: 20, paddingLeft: 5 }}>&nbsp;&nbsp;Account summary</p></div>
                <br />
                <div style={{ float: "left" }}><h1 style={{ color: '#EA3D17', fontSize: 40 }}>Hello {this.state.contactInfo.firstName}</h1></div>
                <div className="chooseNumber"><p style={{ float: "left", paddingRight: 10 }}><b>Choose your number</b></p>
                    <select className="dropDownStyle" name="MobileNumer" value={content} onChange={this.handleChange}>
                      {ctnList}
                    </select>
                </div>
            </div>
        );
    }
}



JSON:

 "subsAssociations": [
                  {
                    "uses": true,
                    "subscription": {

                      "serialNumber": "1234",
                      "selected": false
                    }
                  },
                  {
                    "uses": true,
                    "subscription": {
                      "subscriptionID": "1-50ZB4NR",
                       "selected": true
                    }


mainController.js

const express = require('express');
const router = express.Router();
import React from 'react';
import { renderToString } from 'react-dom/server';
import ReactDOM from 'react-dom';
import MainPage from './myaccount/MainPage';

/* GET home page. */
router.get('/', (req, res, next) => {

  // res.status(200).send('hello world');
  const markup = renderToString(<MainPage/>);
  return res.render('index', { markup });
});

module.exports = router;

index-static.html

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

Answer 1

此错误是由webkit和Node以不同方式呈现对象中值的排序引起的。 解决此问题的最简单方法是使JSX代码中道具的顺序与客户端呈现的顺序相匹配。

这可能是由一些事情造成的，您与Node争夺标签控制权，或者是浏览器中的缺陷（例如Chrome）。

要修复Chrome缺陷，我唯一可以解决此问题的方法是安装此polyfill（对象分配也应该可以，但不适合我）：

npm install object.assign --save 并将其添加到您的Javascript代码中：

删除Object.assign; Object.assign = require（'object.assign'）。shim（）;

在多个浏览器中尝试行为。问题在于下拉组件的顺序。我也看到（服务器）actid =“289”＆gt;

参考：https://www.garysieling.com/blog/fixing-react-attempted-reuse-markup-container-checksum-invalid

还添加http://jeffhandley.github.io/QuickReactions/19-isomorphic.html

React在客户端和服务器上呈现不同的值，导致校验和不匹配

1 个答案: