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> ); 
}

建议:

为每个元素分配唯一键.

有关密钥的更多详细信息,请查看此答案:了解React.js中数组子项的唯一键