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

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 并收集如下所示的数据：

它显示 "no data" 大约十分之一秒，但后来我猜想它成功获取了数据并且 this.state.features 不再为空。但即使功能不为空，它也不会在浏览器中显示任何内容。

Answer 1

因为你没有在地图体内返回任何东西，第二你需要使用 {} 来打印 feature.Description 因为它是一个动态数据，第三你需要为每个元素分配唯一的键内部循环否则会发出警告。

使用这个：

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 的工作方式。您需要在 map 中有一个 return 语句，它基本上是针对数组 return 某某的每个元素。

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

例如，对于每个 feature，它是 returning 一个 span，其内容为 feature.Description。

也喜欢Mayank Shukla指出一个key很重要。 keys 基本上被 React 用于在状态更改为旧的 DOM 时比较新的 DOM 并仅进行那些需要的更改（而不是重新渲染整个组件）。 keys 必须是唯一的，因此使用 feature.Id 作为键，因为它是唯一的。不要将数组索引用作 keys，因为数组可能会更改，然后 indices 将指向新数组中的错误元素。

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

loop data from state with react.js

reactjs

axios