Question

我正在研究React教程：http://facebook.github.io/react/docs/tutorial.html

我无法让应用更新comments.json文件，并在表单中输入新的注释。

我在教程提供的节点服务器代码上运行它。

这是来自github的代码。我按照上面的链接教程，我的代码匹配此代码。两者都有下面列出的相同错误。

/**
 * This file provided by Facebook is for non-commercial testing and evaluation
 * purposes only. Facebook reserves all rights not expressly granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

var Comment = React.createClass({
  render: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment, index) {
      return (
        // `key` is a React-specific concept and is not mandatory for the
        // purpose of this tutorial. if you're curious, see more here:
        // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
        <Comment author={comment.author} key={index}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

React.render(
  <CommentBox url="comments.json" pollInterval={2000} />,
  document.getElementById('content')
);

我在浏览器控制台中收到以下错误：

ReferenceError: reference to undefined property e.propTypes react.min.js:13:4709
SyntaxError: test for equality (==) mistyped as assignment (=)? JSXTransformer.js:12226:42
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:6165
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:6391
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:7647
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:9524
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:11086
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:11662
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:11700
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:12661
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:12973
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:14794
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:15058
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:15206
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:16278
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:18609
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:18698
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:18758
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:20041
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:20601
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:2:20709
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:3:14197
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:3:14324
SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function jquery-2.1.4.min.js:3:18973
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:3:25901
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:3:28272
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:4:278
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:4:2085
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:4:2529
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:4:2943
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:4:6186
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:4:8672
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-2.1.4.min.js:4:10574
TypeError: variable src redeclares argument marked.min.js:6:2513
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:2625
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:2746
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:2944
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:3083
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:3833
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:3977
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:4089
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:4310
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:5195
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:6423
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:8596
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:8688
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:9130
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:9428
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:9935
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:10064
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:10191
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:10314
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:10413
SyntaxError: test for equality (==) mistyped as assignment (=)? marked.min.js:6:10533
ReferenceError: reference to undefined property n.event.triggered jquery-2.1.4.min.js:3:4813
ReferenceError: reference to undefined property c[b] jquery-2.1.4.min.js:2:30988
"You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx" JSXTransformer.js:314:1
ReferenceError: reference to undefined property opts.target JSXTransformer.js:410:2
ReferenceError: reference to undefined property options.source JSXTransformer.js:9929:0
ReferenceError: reference to undefined property tmp.returnType JSXTransformer.js:8350:0
ReferenceError: reference to undefined property module.id JSXTransformer.js:12032:12
ReferenceError: reference to undefined property e.constructor.displayName react.min.js:13:3501
ReferenceError: reference to undefined property e.props.value react.min.js:12:27284
ReferenceError: reference to undefined property e.props.checked react.min.js:12:27380
ReferenceError: reference to undefined property this.props.children react.min.js:13:23727
ReferenceError: reference to undefined property this._localEventListeners react.min.js:12:27772
ReferenceError: reference to undefined property a.nodeType jquery-2.1.4.min.js:2:30361
ReferenceError: reference to undefined property k.headers jquery-2.1.4.min.js:4:10213
ReferenceError: reference to undefined property a.username jquery-2.1.4.min.js:4:14346
syntax error comments.json:1:1
ReferenceError: reference to undefined property a[v.status] jquery-2.1.4.min.js:4:9025
syntax error comments.json:1:1
ReferenceError: reference to undefined property e.fromElement react.min.js:16:9277
syntax error comments.json:1:1
vReferenceError: reference to undefined property n._dispatchListeners react.min.js:12:22079
ReferenceError: reference to undefined property n[e] react.min.js:12:18466
ReferenceError: reference to undefined property e.props.onChange react.min.js:12:27508
syntax error comments.json:1:1
ReferenceError: reference to undefined property n.ajaxSettings.traditional jquery-2.1.4.min.js:4:13234
syntax error comments.json:1:1
syntax error comments.json:1:1
syntax error comments.json:1:1
syntax error comments.json:1:1
syntax error comments.json:1:1
syntax error comments.json:1:1
syntax error comments.json:1:1

最后一次重复错误是由应用程序检查json文件以获取新注释引起的。

为什么要赢得这项工作？我怎样才能让它发挥作用？如果我运行本教程的github站点提供的代码，我会得到完全相同的结果。

Answer 1

这个特殊的例子是从服务器加载注释，这只有在你有一个可以提供JSON注释数据的服务器设置时才有效。是这样的吗？如果是这样，你的网址是否与示例ajax中的内容相匹配？听起来您可能需要退回到教程过程并从头开始，而不仅仅是复制并粘贴最终的教程代码。 React网站提供了所有分步说明，引导您完成最终结果。

Answer 2

我发现了问题。它与我用来运行带有Node的服务器的server.js文件有关。在server.js文件中有以下代码：

app.use('/', express.static(path.join(__dirname, 'public')));

我在server.js所在的目录中没有名为public的目录。我将我的HTML和JavaScript文件放在与server.js文件相同的目录中。

代码工作正常，因为我创建了缺少的目录并将文件移动到它。感谢您抽出宝贵时间尝试解决此问题。

无法在包含的React教程代码中更新注释文件

2 个答案: