如何在ReactJs中显示Json数据

How to display Json Data in ReactJs

本文关键字：显示 Json 数据 ReactJs 更新时间：2023-09-26

我有这样的代码，我只是想显示Json数据，但它返回未定义

var dataW = [
        {
       empAverage:3,
       reviewerAverage:4,
       stdAverageOfTask:1
    }
]
var ReviewCalculator = React.createClass({
                            getInitialState: function() {
                                      return {data: dataW};
                              },
                          render: function() {
                              return (
                                        <table>
                                                <tr><th>empAverage</th><td>{ this.props.data.empAverage}</td></tr>
                                        </table>
                                  );
                              }
                      });
 ReactDOM.render(<ReviewCalculator    />, document.getElementById('container'));

Fiddle在这里LINK

data是组件的"状态"设置：

getInitialState: function() {
 return {data: dataW};
}

因此，将this.props.data.empAverage更改为this.state.data.empAverage。

当然，因为你没有this.props.data.empAverage，而不是this.state.data.empAverage&你的data是一个数组。对于这个例子，我已经改为[0]，但对于未来，建议使用Array.prototype.map方法

示例

var dataW = [
        {
       empAverage:3,
       reviewerAverage:4,
       stdAverageOfTask:1
    }
]
var ReviewCalculator = React.createClass({
   getInitialState: function() {
     return {data: dataW};
   },
   render: function() {
     return (
        <table>
           <tr>
             <td>{this.state.data[0].reviewerAverage}</td>
           </tr>
        </table>
     );
   }
});
 ReactDOM.render(<ReviewCalculator/>, document.getElementById('container'));

如果需要，可以事件删除JSON.stringify。fiddle

感谢