Question

使用Meteor和React。尝试将服务器中的数据列表呈现到客户端。服务器的数据如下所示：
Searches.insert（{text：data.items [i] .snippet.title}）;

if(Meteor.isClient) {
   Searches = new Meteor.Collection('searches');
   Meteor.subscribe('allSearches');
}

...

    renderTasks(){
   return this.data.searches.map((searches) => {
      return <SearchResultItem searches={searches} />;
    });
 },

...

 <ul>
    {this.renderTasks()}
 </ul>

...

SearchResultItem = React.createClass({
  render(){
    return
      <li>
         {this.props.searches.text}
      </li>
      }
});

Answer 1

您需要为动态子元素提供唯一的key-prop

动态儿童

当孩子们被洗牌时（如在搜索结果中）或者如果新组件被添加到列表的前面（如在流中），情况变得更加复杂。在这些情况下，必须在渲染过程中保持每个孩子的身份和状态，您可以通过为每个孩子分配一个密钥来唯一地识别每个孩子：
 render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

（参考：https://facebook.github.io/react/docs/multiple-components.html#dynamic-children）

在你的情况下：

 renderTasks(){
   return this.data.searches.map((searches, i) => {
      return <SearchResultItem key={i} searches={searches} />;
    });
 }

试图呈现一个列表。没有显示在屏幕上

1 个答案:

动态儿童