反应；映射数组后没有任何渲染答案

【问题标题】：reactjs; after mapping an array nothing renders反应；映射数组后没有任何渲染
【发布时间】：2017-04-20 07:09:50
【问题描述】：

我有一个输入，在用户插入文本后，我想在button-group 的按钮中显示每个单词。我拆分句子并映射它返回

<input .....><button onClick=....>

所以我在输入中插入文本，点击按钮text.split(" ") 直到这里一切正常。但在按钮组部分没有显示任何内容

<div className="btn-group" role="group" aria-label="...">
   {this.mapArrayToButtons()}
</div>

   mapArrayToButtons(){
        this.state.textArr.map((word)=>{
            console.log('the word: ',word);
            return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    }

我看到控制台日志textArr.length 次并逐字逐句。但没有呈现任何按钮，浏览器中也没有显示任何内容。

【问题讨论】：

您错过了 mapArrayToButtons 中的返回 - return this.state.textArr.map

标签： javascript reactjs react-dom

【解决方案1】：

你需要像这样从你的函数中返回一个值：

   mapArrayToButtons(){
        return this.state.textArr.map((word)=>{
            return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    }

希望有帮助！

【讨论】：

【解决方案2】：

您需要知道/注意两件事：

1 - 如果你有一个 jsx 数组，例如：

let arrayOfJsx = [ <div>Hello</div>, <div>World</div> ]

当你把这个数组放在你的渲染方法中时，比如：

render(){

   let arrayOfJsx = [ <div>Hello</div>, <div>World</div> ] 

   return (
      <div> { arrayOfJsx } </div>
   )
}

等价于

render(){

       return (
          <div>
               <div>Hello</div>
               <div>World</div> 
          </div>
       )
}

2 - Array.prototype.forEach 和 Array.prototype.map 的区别：

当你使用forEach时，你从传递给forEach的函数返回什么并不重要，重要的是知道当你返回一个值时函数停止执行，这对forEach来说并不特殊。但是当我们说返回的内容并不重要时，我们想指出返回的内容对 Array.prototype.map 的重要性：

当您想根据为数组中的每个项目返回的内容创建数组时，您需要使用 map。

例子：

let a = [ 1,2,3 ]
let b = a.map( item => item + 1 )
// b is now [ 2,3,4 ]

总而言之，您希望在示例中从 map 创建一个数组并将其放入您的渲染方法中。如果你不知道这两点，你就不会理解它是如何工作的。

注意：您需要为您在 map 函数中返回的每个项目传递一个唯一键。例如：

let a = [ 1,2,3 ]
let arrayOfJsx = a.map( item => <div key={item} > I am { item } </div> )

这样反应就不会抱怨

【讨论】：

【解决方案3】：

试试这个

mapArrayToButtons(){
    const buttons = this.state.textArr.map((word)=>{
        console.log('the word: ',word);
        return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    return buttons;

}

【讨论】：