Reactjs 使用react.js从状态循环数据

我正在做我的第一个reactjs应用程序，我遇到了一些麻烦。 这是我从基本文件调用的特征（子）组件

 var ReactDOM = require('react-dom');
  var React = require('react');
 var ConfigurationService = require('../configurationService');

 class Feature extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        features: null
    };
    this.getConfiguration();

}   
getConfiguration() {
    var self = this;
    var config = ConfigurationService.getConfiguration('test', 'test').then(function (config) {
        self.setState({ features: config.data.Features })
    });       
}
render() {
    if (this.state.features) {
        return (<div> {
            this.state.features.map(function (feature) {
                <span>feature.Description</span>
            })
        }
        </div>)
    }
    else {
        return <div>no data</div>
    }
}
}

module.exports = Feature;

var ReactDOM=require（'react-dom'）；
var React=要求（'React'）；
var ConfigurationService=require（'../ConfigurationService'）；
类功能扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
特征：空
};
这是getConfiguration（）；
}   
getConfiguration（）{
var self=这个；
var config=ConfigurationService.getConfiguration（'test'，'test'）。然后（函数（config）{
self.setState（{features:config.data.features}）
});       
}
render（）{
if（this.state.features）{
报税表（{
this.state.features.map（函数（功能）{
特征.描述
})
}
)
}
否则{
不返回任何数据
}
}
}
module.exports=特征；

它调用我的api并收集如下所示的数据：

if (this.state.features) {
    return (
        <div> 
            {
              this.state.features.map((feature) =>  <span key={feature.Id}> {feature.Description} </span>)
            }
       </div>
    )
    ....

大约十分之一秒，它显示“无数据”，但我猜它成功地获取了数据，并且this.state.features不再为空。

---

但是，即使features不是空的，它也不会在浏览器中显示任何内容。

因为您没有在地图正文中返回任何内容，第二，您需要使用

{}

打印

feature.Description

，因为它是一个动态数据，第三，您需要为循环中的每个元素指定唯一的键，否则它将抛出警告

使用以下命令：

if (this.state.features) {
    return (
        <div> 
            {
               this.state.features.map(function (feature, i) {
                  return  <span key={feature.Id}>{feature.Description}</span>
               })
            }
       </div>
    )
....

---

这不是

map

的工作方式。您需要在

map

中有一个

return

语句，它基本上用于数组return so和so的每个元素

return (
        <div> {
            this.state.features.map(function (feature) {
               return  (<span key={feature.Id}>{feature.Description}</span>)
            })
        }
        </div>
 )

返回(
{
this.state.features.map（函数（功能）{
返回（{feature.Description}）
})
}
)

例如，对于每个

功能

，它返回一个

span

，内容为

feature.Description

---

同样像

mayankshukla

指出的

键

很重要<当状态更改为旧的

DOM

时，react基本上使用code>键来比较新的

DOM

，并仅进行所需的更改（而不是重新呈现整个组件）。

键必须是唯一的，因此请使用
功能.Id
作为唯一的键。不要将数组索引用作
键，因为数组可能会更改，然后
索引将指向新数组中的错误元素。
谢谢！！：）我认为，在html中必须返回一个值，这有点奇怪。但我想这只是你必须要习惯的东西：Pit不是html，map期望为每个元素调用一个函数，这类似于给出一个函数名并在render方法之外定义该名称，你需要从该函数返回一些值：）但有一件事，数组
索引
作为
键
是一种
反模式
，因为数组可以更改，但
索引
将指向不同的元素，从而导致React的扩散算法出现问题。因为
功能
对象有一个应该使用的
Id
。也不用担心语法。不是
HTML
，而是
JSX
，它是Javascript。@谢谢，我不确定id的唯一性，这就是为什么我使用index:）@Mayank-不用担心<来自后端API的代码>ID
几乎总是唯一的，因为它们通常由数据库生成。