React render具有正確的數據，但不會呈現JSX

Question

因此，我認為這是一個格式問題，或者我不清楚在動態構建時返回如何工作。

如果我將代碼替換為其他代碼，則Results中的呈現功能將起作用，它將在需要的位置呈現。 同樣，Results函數中的console.log可以正確輸出數據。 沒有錯誤，它只是不呈現html並且不會在SynonymElement中命中調試器。

我在這里想念什么/我誤解了什么核心概念？

（這只是一個輸入形式，需要輸入一個單詞，用戶單擊提交，它將返回一個對象，該單詞以單詞為鍵，值是一個由synonynms組成的數組。在ul中呈現）

'use strict'

const Smithy = React.createClass({
  dsiplayName: "Smithy",

  getInitialState: function() {
    return { data: []};
  },

  handleSubmit: function(data) {
    $.get('/get-synonyms', { data: data.data }).done(function(data) {
      this.setState({ data: data})
    }.bind(this));
  },

  render: function() {
    return (
      <div className="smithy">
        <h1>Craft Tweet</h1>
        <SmithyForm onSubmit={this.handleSubmit} />
        <Results data={this.state.data} />
      </div>
    )
  }
})

const SmithyForm = React.createClass({
  displayName: "SmithyForm",

  getInitialState: function() {
    return { placeholder: "tweet", value: "" };
  },

  handleChange: function(event) {
    this.setState({value: event.target.value});
  },

  handleSubmit: function(event) {
    event.preventDefault();
    var tweet = this.state.value.trim();
    this.props.onSubmit({ data: tweet });

    this.setState({value: ''});
  },

  render: function() {
    var placeholder = this.state.placeholder;
    var value = this.state.value;
    return (
      <form className="smithyForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder={placeholder} value={value} onChange={this.handleChange} />
        <button>smithy</button>
      </form>
    );
  }
})

const SynonymElement = React.createClass({
  render: function() {
    debugger
    return (
        <li>{this.props.data}</li>
    )
  }
})

const Results = React.createClass({
  render: function() {
    var words = this.props.data;

    return (
        <div className="results">
         {
           Object.keys(words).map(function(value) {
             { console.log(value) }
          <div className={value}>
            <ul>
             {
              words[value].map(function(syn) {
                { console.log(syn) }
                return <SynonymElement data={syn} />
              })
             }
            </ul>
          </div>
          })
         }
        </div>
    )
  }
})

ReactDOM.render(<Smithy />, document.getElementsByClassName('container')[0])

Answer 1

可能還有其他一些復雜的問題，但是假設其他所有東西都正確連接，則需要返回傳遞給第一個映射的函數的結果（通過集合Object.keys(words) ），就像后面的map該函數被執行，沒有任何有用的返回。

可能只是React JSX中的重復循環

return (
  <div className="results">
  {
    Object.keys(words).map(function(value) {
      return (   // <-- this 
        <div className={value}>