React.js 未捕获错误：不变违规更新列表答案

【问题标题】：React.js Uncaught Error: Invariant Violation updating listReact.js 未捕获错误：不变违规更新列表
【发布时间】：2018-07-02 23:23:25
【问题描述】：

拥有一个包含大量图片的页面，本质上是一个图片库。图库页面可能会更新以包含新的或删除现有的图像条目。使用以下函数创建图像的条目，第一次调用该函数时，它成功完成，后续调用处理更新的模型，失败并出现异常

'未捕获的错误：Invariant Violation'。

这是什么原因造成的？

render: function () {
  var imageEntries = this.props.map(function (entry) {
    var divStyle = {
      backgroundImage: 'url(' + entry.preview + ')',
    };
    return React.DOM.div({key: entry.key, className: 'image-stream-entry'},
      React.DOM.div({className: 'image', style: divStyle}),
        imageMetadata(entry)
      );
   });

  return (
   React.DOM.div(null, imageEntries)
 );
}

【问题讨论】：

如果你使用未压缩的 React 构建，你会收到有用的错误消息。
imageMetadata 是做什么的？
如果您正在执行异步更新，则可能需要在调用 setState 之前检查 isMounted，因为在请求完成时可能不再安装组件的实例。见facebook.github.io/react/docs/component-api.html#ismounted
在这一行：var imageEntries = this.props.map(function (entry) { 我认为您缺少实际的 prop。它应该类似于：var imageEntries = this.props.entries.map(function (entry) {。 map 是 javascript 的 map 函数。由于语法错误，我遇到了类似的错误。

标签： javascript reactjs

【解决方案1】：

这意味着实际 DOM 与虚拟 DOM 处于不同的状态，React 无法协调两者以进行渲染。这通常是由 ELSE 更改了 React 所期望的 HTML 引起的，可能是 JavaScript 错误，也可能是其他库进行了更改。

正如 pyrho 所指出的，您对this.props.map 的调用似乎是个问题。 this.props 应该返回一个对象，而 Object 没有 map 方法。可能会抛出 Invariate 错误，因为该语法错误导致组件无法挂载到 DOM 中。

我用您的代码的修改版本编写了一个 codepen（以及一些额外的支持代码以使演示工作）。你可以在这里查看：http://codepen.io/jhubert/pen/PwqZyr

核心代码如下：

var renderEntry = function (entry) {
  var divStyle = {
    backgroundImage: 'url(' + entry.preview + ')'
  };

  return D.div({ key: entry.key, className: 'image-stream-entry'},
            D.div({className: 'image', style: divStyle}),
            imageMetadata(entry)
         );
};

Gallery = React.createClass({
  displayName: 'Gallery',
  propTypes: {
    entries: React.PropTypes.array.isRequired
  },
  getDefaultProps: function () {
    return { entries: [] };
  },
  render: function () {
    return D.div({ className: 'gallery' }, this.props.entries.map(renderEntry));
  }  
});

【讨论】：