Question

我很确定我只是没有正确的语法，但似乎没有弄清楚正确的语法。这是我的代码（它位于return()内，返回值与html一起位于render(){}内。

<div className="questions">
  Now let's add some questions... <br />
  {// This is where we loop through our questions to
  // add them to the DOM.
  this.state.questions.map(question => {
    return (
      <div>
        {question}
        {
          for (var i = 0; i < 4; i++) {
            answers.push(
              <input 
                type="text"
                onChange={this.handleChange}
                name={uuid()}
              />
            );
          }
        }
      </div>
    );
  })
</div>

我对此很陌生，所以任何帮助都将非常有帮助，谢谢！

Answer 1

您正在推送到JSX内部的answers数组，但从未使用过它。相反，您可以在return语句之前将其压入数组，然后在JSX中使用它。

this.state.questions.map(question => {
  const answers = [];

  for (var i = 0; i < 4; i++) {
    answers.push(
      <input type="text" onChange={this.handleChange} />
    );
  }

  return (
    <div>
      {question}
      {answers}
    </div>
  );
});

或者，您可以使用Array.from：

<div className="questions">
  Now let's add some questions... <br />
  {this.state.questions.map(question => {
    return (
      <div>
        {question}
        {Array.from({ length: 4 }, () => (
          <input type="text" onChange={this.handleChange} />
        ))}
      </div>
    );
  })}
</div>

无法编译React

1 个答案: