React.js未定义函数

React.js undefined function

本文关键字:函数 未定义 js React      更新时间:2023-09-26

遵循Microsoft关于React.js的教程。

我正在尝试映射一个列表的功能,所以它会重复多次。

这是错误的主要代码:

   {[1,2,3].map(this.renderInboxItem)}
我得到的错误是:
bundle.js:8488 Uncaught TypeError: undefined is not a function

完整代码:

var React = require('react');
var ReactDOM = require('react-dom');
var sample = require('./sample-data.js');
var App = React.createClass({
  renderInboxItem: function(){
    return <h1> Test </h1>
  },
    getInitialState: function() {
    return {
      "humans":{},
      "store":{}
    };
  },
  loadSampleData: function(){
    this.setState(sample);
  },
  render : function() {
    return (
      <div>
        <div id="header"></div>
        <button onClick={this.loadSampleData}> loadSampleData </button>
        <div className="container">
          <div className="column">
            <InboxPane humans={this.state.humans} />
          </div>
          <div className="column"></div>
          <div className="column"></div>
        </div>
      </div>
    )
  }
});
var InboxPane = React.createClass({
  render : function() {
    return (
      <div id="inbox-pane">
        <h1>Inbox</h1>
        <table>
          <thead>
            <tr>
              <th>Chat Received</th>
              <th>Name</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
      {[1,2,3].map(this.renderInboxItem)}

          </tbody>
        </table>
      </div>
    )
  }
});
var InboxItem = React.createClass({
  render: function(){
    return (
      <tr>
        <td>5PM</td>
        <td>Rami Loves Pizza</td>
        <td>Order Sent</td>
      </tr>
    )
  }
});
ReactDOM.render(<App/>, document.getElementById('main'));

renderInboxItem是在您的App类上定义的,但是您在不存在的InboxPane类上调用它。将方法移动到InboxPane