React 渲染具有正确的数据但不会渲染 JSX

Question

所以，我认为这是一个格式问题，或者我不清楚 return 在动态构建时是如何工作的。

Results 中的渲染函数有效，如果我用任何其他代码替换代码，它会在我想要的地方渲染。同样，Results 函数中的 console.log's 会正确输出数据。没有错误，它只是没有呈现 html 并且没有在 SynonymElement 中命中调试器。

我在这里遗漏了什么/我误解了什么核心概念？

（这只是一个接受单词的输入表单，用户点击提交，它 return 是一个对象，以单词作为键，值是同义词数组。在 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

可能还有其他一些复杂的问题，但假设其他一切都正确连接，您需要 return 您传递到第一个映射（在集合 Object.keys(words) 上）的函数的结果就像你在后面的 map 中所做的那样，否则函数将被执行并且没有任何用处 returned.

可能只是 loop inside React JSX

的骗局

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

React 渲染具有正确的数据但不会渲染 JSX

React render has the correct data but won't render the JSX

javascript

reactjs

react-jsx