Fix a React duplicate key error

If a single message contains the same link twice, we get an error from React
about the clashing keys. De-dup the links to keep it quiet.
This commit is contained in:
Richard van der Hoff 2017-07-06 10:02:25 +01:00
parent b52a6a693a
commit 6a2d6b2e6e

View file

@ -143,9 +143,15 @@ module.exports = React.createClass({
if (this.props.showUrlPreview && !this.state.links.length) { if (this.props.showUrlPreview && !this.state.links.length) {
var links = this.findLinks(this.refs.content.children); var links = this.findLinks(this.refs.content.children);
if (links.length) { if (links.length) {
this.setState({ links: links.map((link)=>{ // de-dup the links
return link.getAttribute("href"); const seen = new Set();
})}); links = links.filter((link) => {
if (seen.has(link)) return false;
seen.add(link);
return true;
});
this.setState({ links: links });
// lazy-load the hidden state of the preview widget from localstorage // lazy-load the hidden state of the preview widget from localstorage
if (global.localStorage) { if (global.localStorage) {
@ -158,12 +164,13 @@ module.exports = React.createClass({
findLinks: function(nodes) { findLinks: function(nodes) {
var links = []; var links = [];
for (var i = 0; i < nodes.length; i++) { for (var i = 0; i < nodes.length; i++) {
var node = nodes[i]; var node = nodes[i];
if (node.tagName === "A" && node.getAttribute("href")) if (node.tagName === "A" && node.getAttribute("href"))
{ {
if (this.isLinkPreviewable(node)) { if (this.isLinkPreviewable(node)) {
links.push(node); links.push(node.getAttribute("href"));
} }
} }
else if (node.tagName === "PRE" || node.tagName === "CODE" || else if (node.tagName === "PRE" || node.tagName === "CODE" ||