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

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

2 个答案: