如何在React中显示列表

Question

我尝试使用React显示一些本地JSON数据中的产品特性列表，但是我的map/list功能没有在DOM上显示任何内容。

我最初导入了react-render-html，但它不兼容，所以我不得不删除它。

这是我的productHighlights

class ProductHighlights extends Component {

    constructor(props) {
        super(props);
            this.state = {
                data: null
            }
        }

        componentWillReceiveProps(newProps) {
        const index = newProps.selected;
        const productData = Number.isInteger(index) ? newProps.productData[index] : null;
            if (productData !== null) {
                this.setState({ data: productData });
            }
        }

    getFeatureList = (itemDescription) => {
     itemDescription[0].features.map((feature, index) => (
        <li key={index}>{feature}</li>
        ))
      }

    render() {
        const itemDescription = this.state.data ? this.state.data.ItemDescription : null;
        const featureList = itemDescription ? this.getFeatureList(itemDescription) : null;
        console.log(itemDescription);
        console.log('item description = ' + itemDescription);

        return (
            <div className="product-highlights-container">
              <div className="product-highlights-title">product highlights</div>
              <ul className="product-features">
                {featureList}
              </ul>
            </div>
          )
    }
}

export default ProductHighlights;

在屏幕上登录itemDescription会显示[{...}]，然后打开> 0 > 'features: Array(10). I'm not sure whygetFeaturedList`未成功获取此信息。

Answer 1

您在控制台中看到的错误消息是什么？您的map隐式返回未定义的。您需要返回元素。

itemDescription[0].features.map((feature, index) => 
  {
    return (<li key={index}>{feature}</li>);
  }
)

Answer 2

我把它显示出来了--我所要做的就是在我的getFeatureList函数的这一行中的feature周围添加空格：

<li key={index}>{ feature }</li>

现在唯一的事情是标签显示在列表中。我可能需要分析一下。