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

【问题标题】：React renders different values on client and server leading to checksum mismatchReact 在客户端和服务器上呈现不同的值导致校验和不匹配
【发布时间】：2018-05-03 12:36:10
【问题描述】：

我对 react.Problem 语句很陌生侧面：

面临的问题：bundle.js:1 警告：React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。 React 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，找出为什么在客户端或服务器上生成的标记不同：（客户端）在 value="1234" data-reactid="290 （服务器）在 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>

【问题讨论】：

标签： reactjs client-side checksum server-side-rendering

【解决方案1】：

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

这可能是由几件事引起的，您与 Node 争夺标签的控制权，或浏览器中的缺陷（例如 Chrome）。

要修复 Chrome 缺陷，我可以让它工作的唯一方法是安装这个 polyfill（object-assign 应该也可以工作，但对我没有用）：

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

删除 Object.assign; Object.assign = require('object.assign').shim();

在多个浏览器中尝试行为。问题在于下拉组件的顺序。我还看到（服务器）actid="289">

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

另外加http://jeffhandley.github.io/QuickReactions/19-isomorphic.html

【讨论】：