地图功能在 React 中不起作用

IT技术 javascript dictionary reactjs ecmascript-6
2021-04-13 14:13:31

我是 React JS 的新手,我正在测试 fiddler 中的一些功能。我不确定为什么我会收到指向 map 函数的错误。我无法呈现我定义的数组。

相关片段:

      {this.props.data.productSpecs.map(function(productSpec){
        <b>Category Name:</b> {productSpec};
      })}

完整代码:

var productCategory = {
    productName: 'SamamgaTV1',
  productCategory: 'Television', 
  productSpecs: ['32inch','black','hd']
};

var ProductComponent = React.createClass({
  render: function() {
    return( <div>
                        <h2>Product</h2>
              <b>Product Name:</b> {this.props.data.productName}
              <h2>Category</h2>
              <b>Category Name:</b> {this.props.data.productCategory}
              <h2>Specs</h2>
              {this.props.data.productSpecs.map(function(productSpec){
                <b>Category Name:</b> {productSpec};
              })}
           </div>);
  }
});

ReactDOM.render(
  <ProductComponent data={productCategory} />,
  document.getElementById('container')
);
3个回答

首先你错过了return,然后你必须返回一个元素。在这里你返回一个<p>和一个TextNode

此外,您需要提供一个唯一的密钥。

试试这个:

{this.props.data.productSpecs.map(function(productSpec, i){
        return <span key={i}><b>Category Name:</b> {productSpec}</span>;
})}
我刚刚花了将近一个小时才意识到我忘记了“return”关键字...#rusty 需要该密钥以避免控制台中出现警告并避免列表项之间潜在的混乱
2021-06-07 14:13:31
谢谢..这完成了工作...我不认为我需要密钥,但是在处理更大的应用程序时它会有所帮助,它显示了我如何传入 ID ..
2021-06-21 14:13:31

您需要从map处理程序返回值

{this.props.data.productSpecs.map(function(productSpec){
    return (<span><b>Category Name:</b> {productSpec}<span>);
})}

如果您不想(或在某些情况下不能)将内容包装在跨度中,您可以创建并返回片段(非常方便)

const createFragment = require('react-addons-create-fragment');

{this.props.data.productSpecs.map(function(productSpec){
    return createFragment({
        bold: <b>Category Name:</b>,
        spec: productSpec,
    });
})}
是的,这是我忽略的另一个问题。更新了答案。
2021-05-22 14:13:31
我也试过了,似乎不起作用..这是我的 jsfiddle 链接jsfiddle.net/69z2wepo/59585
2021-05-29 14:13:31
这失败是因为您返回了两个元素。检查我的答案
2021-06-20 14:13:31

可能是您使用的是字符串,因此您必须使用 split 方法并传入一个空字符串,例如 myValue.split('').map();