reactjs;映射數組後沒有任何呈現

我有一個輸入，在用戶插入文本後，我想在button-group的按鈕中顯示每個單詞。我分裂了一句並將其映射返回reactjs;映射數組後沒有任何呈現

<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次，一個字一個字。但沒有渲染按鈕，瀏覽器中沒有顯示任何按鈕。

來源

2016-12-05 Amir-Mousavi

你錯過了在mapArrayToButtons回報 - 返回'this.state.textArr.map' –

您將需要從你的函數返回一個值，像這樣：

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

希望幫助！

來源

2016-12-05 19:41:29

試試這個

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; 

}

來源

2016-12-05 20:11:31 amritdevilo

有兩件事情你需要知道/瞭解：

- 如果你有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> 
     ) 
}

- Array.prototype.forEach和Array.prototype.map之間Diffence：

當您使用的forEach，你從函數返回你逝去toEach並不重要，只有當你返回一個值時才知道該函數停止執行，這對於forEach來說並不特別。但是當我們說你返回的內容並不重要時，我們想指出你返回的對Array.prototype.map的重要性如何：

你想在你想要爲每個返回的數據創建一個數組時使用map項中的數組。

例子：

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

綜上所述，你想要什麼在你的例子做創建地圖的數組，並把它放在你的渲染方法。如果你不知道這兩點，你就不會理解它是如何工作的。

注意：您需要爲您在地圖功能中返回的每個項目傳遞一個唯一鍵。例如：

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

這樣發生反應，沒有按牛逼抱怨

來源

2016-12-05 20:22:29 FurkanO

reactjs;映射數組後沒有任何呈現

回答

相關問題