Question

class App extends Component {
  constructor() {
    super();

    this.state = {
        posts: [{
        question: 'QUESTION',  
        answers: [{
          answer: 'first answer'
        }],
      }],
    }
  }

  render() {
    return (
      <div>           
    {this.state.posts.map(item => 
          <div>
          <h1> {item.question} </h1>
          {item.answers.map(a => {
             <div> {a.answer} </div>
            })}
           </div>
        )}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

想知道为什么这不起作用。对我来说，item.answers.map将通过答案数组进行映射。

project

Answer 1

问题是你没有返回<div class="wrapper"> Your content goes here... <div class="push"></div> </div> <footer class="THG-center"> <p>Copyright © 2017 - All Rights Reserved - THG- Graphics.com</p> <p> <a class="THG-hover-blue" href="#">Terms of Use</a> <a class="THG-hover-blue" href="#">Privacy Policy</a> <a class="THG-hover-blue" href="#">FAQ</a> </p> </footer>，因为箭头函数是用花括号（“块体”）而不是括号（带有隐式返回的“简洁体”）定义的。

试试这个：

<div> {a.answer} </div>

来自MDN：

箭头功能可以是“简洁的身体”或通常的“块”   体”。

在一个简洁的主体中，只指定了一个表达式，该表达式成为   显式{item.answers.map(a => ( <div> {a.answer} </div> ))}值。在块体中，您必须使用显式   退货声明。

通过数组内部的数组映射

1 个答案: