ES6 数组映射不返回任何内容：ReactJS

Question

我有一个数组和一个简单的字符串值。我想映射我的数组，因为我试图找到我的字符串值。

我有这样的代码，但是 map 函数没有返回任何内容：/

class Application extends React.Component {
  constructor(){
    super();

    this.state = {
      questionAnswer: 'is that possible',
      question: ['is', 'possible', 'that']
    }  
  }

  renderKeywords() {
    this.state.question.map((item, key) => {
      return (
        <span>{item}</span>
      );
    }); 
  }

  render() {
    return (
      <div>
        <div>blabla</div>
        {this.renderKeywords()}  
      </div>
   );
 }
}
React.render(<Application />, document.getElementById('app'));

Answer 1

因为你没有从renderKeywords 方法返回任何东西，你只是从地图主体返回。如果你没有从函数中返回任何东西，那么默认情况下它会返回undefined，你需要返回map的结果（元素数组）。

像这样：

renderKeywords() {
    return this.state.question.map((item, key) => {   //here
        return (
            <span key={key}> {item} </span>
        );
    }); 
}

总之你可以这样写：

renderKeywords() {
   return this.state.question.map((item, key) => <span key={key}> {item} </span> ); 
}

建议：

为每个元素分配唯一的key。

查看此答案以获取有关密钥的更多详细信息：Understanding unique keys for array children in React.js

Answer 2

你应该返回map函数本身，你也可以用es6单线箭头函数来实现它

class Application extends React.Component {
  constructor(){
    super();

    this.state = {
      questionAnswer: 'is that possible',
      question: ['is', 'possible', 'that']
    }  
  }

  renderKeywords() {
    return this.state.question.map((item, i) =><span key={i}>{item}
   </span>}); 
  }

  render() {
    return (
      <div>
        <div>blabla</div>
        {this.renderKeywords()}  
      </div>
   );
 }
}
React.render(<Application />, document.getElementById('app'));