Question

我正在做我的第一个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;

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

就像十分之一秒一样，它显示了＆＃34;没有数据＆＃34;但后来我猜它成功获取数据并且this.state.features不再为null。但即使功能不为空，它也不会在浏览器中显示任何内容。

Answer 1

因为你没有在地图正文中返回任何内容，所以你需要使用{}来打印feature.Description，因为它是动态数据，而第3是你需要为循环内的每个元素分配唯一键否则会发出警告。

使用此：

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

或者您也可以使用arrow function，如下所示：

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

Answer 2

这不是map的工作方式。你需要在return内部有一个map语句，基本上对于数组返回的每个元素都是如此。

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

例如，对于每个feature，它返回的span内容为feature.Description。

同样Mayank Shukla指出key很重要。 keys基本上由react用于比较状态更改为旧DOM时的新DOM，并仅进行所需的更改（而不是重新呈现整个组件）。 keys必须是唯一的，因此请使用feature.Id作为密钥，因为它是唯一的。不要将数组索引用作keys，因为数组可能会更改，然后indices将指向新数组中的错误元素。

使用react.js循环来自状态的数据

2 个答案: