Question

我尝试迭代一个对象并在 React 0.14 中动态创建表行，如下所示

[{"id":"1","title":"\u062e\u062f\u0645\u0627\u062a \u0641\u0646\u06cc
\u0645\u0647\u0646\u062f\u0633\u06cc"},{"id":"2","title":"\u0622\u0645\u0648\u06‌32\u0634"}]

并尝试在

中添加此内容

 var msg = React.createClass({

render: function() {
   var profiles = [];
    $.map(profs, function(prof){
       profiles.push(<tr>
          <td>{prof.Name}</td>
          <td>{prof.Type}</td>
           </tr>)

但不呈现且也不会引发任何错误。我呈现了像

<table>
  <tbody>
        {profiles}
  </tbody>
 </table>

如果我删除＆＃34; ReactDOM.render(React.createElement(msg, {data: this.model.attributes}), this.el);＆＃34;它正确地渲染页面的其他部分。但是如果我在 React 0.13.2 和

中使用相同的代码

{profiles}

工作正常。如果有人建议针对这类错误调试工具，那将会更有帮助。

Answer 1

刚刚将我的应用程序升级到0.14，并且当组件本身或其中一个子组件具有未定义的mixin时，我遇到了静默失败的渲染。在我的情况下，它是反应路由器的弃用混合...但我花了很长时间才弄明白。 React通常非常优雅地处理undefined或null值，或者至少带有警告，但显然不是当mix到mixin时。

Answer 2

我认为问题在于，您的第一个代码示例中的map方法永远不会关闭：最终)关闭push，这会留下map及其回调（即function(prof)）未公开。

正确呈现的

Here's a working component based on your code：

var ExampleComponent = React.createClass({
  render: function () {
    var profiles = $.map(this.props.profs, function (prof) {
      return (
        <tr key={prof.name}>
          <td>{prof.name}</td>
          <td>{prof.type}</td>
        </tr>
      );
    });

    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Type</th>
          </tr>
        </thead>
        <tbody>
          {profiles}
        </tbody>
      </table>
    );
  }
});

var profileObjects = [{name: 'Brendan Eich', type: 'Netscape'},
                      {name: 'Jordan Walke', type: 'Facebook'}
                     ];

ReactDOM.render(
  <ExampleComponent profs={profileObjects} />,
  document.getElementById('container')
);

React View不会在React 0.14中呈现

2 个答案: