Javascript 如何在ReactJs中显示Json数据

我有这样的代码，我只是试图显示一个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'));

var-dataW=[
{
平均值：3，
平均：4，
stdAverageOfTask:1
}
]
var ReviewCalculator=React.createClass({
getInitialState:函数（）{
返回{data:dataW}；
},
render:function（）{
返回(
empAverage{this.props.data.empAverage}
);
}
});
ReactDOM.render（，document.getElementById（'container'））；

---

小提琴在这里

当然，因为你没有

这个.props.data.empAverage

而不是

这个.state.data.empAverage

你的

数据

它是一个数组。对于本例，我已更改为

[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'));

var-dataW=[
{
平均：3，
审核平均值：4，
stdAverageOfTask:1
}
]
var ReviewCalculator=React.createClass({
getInitialState:函数（）{
返回{data:dataW}；
},
render:function（）{
返回(
{this.state.data[0].reviewerAverage}
);
}
});
ReactDOM.render（，document.getElementById（'container'））；

如果需要，可以删除事件

JSON.stringify

---

谢谢

数据

是否在此处设置了组件的“状态”：

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

---

因此，将

this.props.data.empAverage

更改为

this.state.data.empAverage

@TheReason

dataW

？？我改了，但它不显示键的值，而只显示名称。问题是你的数据。你到底想显示什么？在我的本地主机中，我调用了一个API来更新数据，Json看起来像这样我试图以一种我所更改的表格格式显示，但它没有显示键的值，而是只显示服务器中的名称。我遇到了一个错误，我正在从一个API加载Json，它看起来像这样

[{“empAverage”：3，“reviewerAverage”：0，“stdAverageOfTask”：5}]

yes它显示了一个错误，

SyntaxError:JSON.parse:JSON数据第1行第1列的数据意外结束