我很反应.Problem语句：从后端从json respose中选择所选值 . 在json中，selected = true的订阅必须在初始加载和屏幕上的导航中保持选择状态，而不管客户端/服务器端：
面临问题：bundle.js：1警告：React尝试在容器中重用标记，但校验和无效 . 这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户端所期望的 . React注入了新的标记来补偿哪些有效，但是你已经失去了服务器渲染的许多好处 . 相反，弄清楚为什么生成的标记在客户端或服务器上是不同的:(客户端）on value =“1234”data-reactid =“290（server）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 }}> Account summary</p></div>
<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>
1 回答
此错误是由webkit和Node以不同方式呈现对象中值的排序引起的 . The easiest way to fix this is to make the order of the props in your JSX code match what the client rendering has.
这可能是由于一些事情，您与Node争夺标签的控制权，或者是由浏览器中的缺陷（例如Chrome）引起的 .
要修复Chrome缺陷，我唯一能让它工作的方法就是安装这个polyfill（对象分配也应该可以工作，但不适合我）：
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