Question

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

小提琴在这里LINK

Answer 1

data是您在此处设置的组件的“州”：

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

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

Answer 2

当然，因为你没有this.props.data.empAverage而不是this.state.data.empAverage＆amp;你的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

由于

如何在ReactJs中显示Json数据

2 个答案: