在 React 中渲染一个 array.map()

IT技术 javascript reactjs
2021-02-26 14:47:04

我在尝试使用数据数组来呈现<ul>元素时遇到问题。在下面的代码中console.log's 工作正常，但列表项没有出现。

var Main = React.createClass({
  getInitialState: function(){
    return {
      data: dataRecent
    }
  },

  render: function(){
    return (
      <div>
        <ul>
          {
           this.state.data.map(function(item, i){
             console.log('test');
             <li>Test</li>
           })
         }
        </ul>
      </div>
    )
  }
});

ReactDOM.render(<Main />, document.getElementById('app'));

我究竟做错了什么？请随时指出任何不是最佳实践的内容。

6个回答

Gosha Arinich是对的，你应该返回你的<li>元素。但是，无论如何，在这种情况下，您应该在浏览器控制台中收到令人讨厌的红色警告

数组或迭代器中的每个孩子都应该有一个唯一的“键”props。

因此，您需要将“key”添加到您的列表中：

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

或者删除console.log()并使用 es6箭头函数做一个漂亮的单行：

this.state.data.map((item,i) => <li key={i}>Test</li>)

重要更新：

答案上面解决当前的问题，但作为谢尔盖在评论中提到：使用取决于地图索引关键是坏，如果你想要做一些过滤和排序。在这种情况下，使用item.idifid已经存在，或者只是为它生成唯一的 id。

嘿！你还需要帮助吗？它是同一个“每个孩子在一个数组或迭代器应该有一个独特的‘关键’道具”讨厌的消息？
2021-04-23 14:47:04
当我将这组 <li> 添加到 <ul> 中时。我仍然在控制台中收到相同的红色令人讨厌的警告。如何摆脱相同？
2021-05-01 14:47:04
key必须是独一无二的。您的代码在排序后会导致错误this.state.data，因为key总是依赖于数组中的索引
2021-05-11 14:47:04
@SergeyPodgornyy 完全同意，很久以前写的。更新了答案。感谢您的跟进！
2021-05-17 14:47:04

你不回来了。改成

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>;
})

let durationBody = duration.map((item, i) => {
      return (
        <option key={i} value={item}>
          {item}
        </option>
      );
    });
欢迎使用堆栈溢出！感谢您提供此代码片段，它可能会提供一些有限的即时帮助。一个正确的解释将通过展示为什么这是一个很好的问题解决方案来极大地提高其长期value，并且会使它对未来有其他类似问题的读者更有用。请编辑您的答案以添加一些解释，包括您所做的假设。
2021-05-11 14:47:04

您正在隐式返回undefined. 您需要返回元素。

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>
})

加起来 Dmitry 的答案，如果您不想手动处理唯一键 ID，则可以React.Children.toArray按照React 文档中的建议使用

React.Children.toArray

将子项不透明数据结构作为平面数组返回，其中键分配给每个子项。如果你想在你的渲染方法中操作子元素的集合，特别是如果你想在传递它之前重新排序或切片 this.props.children 时很有用。

笔记：

React.Children.toArray()在展平子项列表时更改键以保留嵌套数组的语义。也就是说， toArray 为返回数组中的每个键添加前缀，以便每个元素的键范围限定为包含它的输入数组。

 <div>
    <ul>
      {
        React.Children.toArray(
          this.state.data.map((item, i) => <li>Test</li>)
        )
      }
    </ul>
  </div>
其它你可能感兴趣的问题
上一篇window、window.top 和 window.parent 有什么区别？ 下一篇请求偶尔在 chrome 中停滞很长时间