Question

我有一个输入，在用户插入文本后我想在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次并逐字逐句。但是没有按钮呈现，浏览器中也没有显示任何内容。

Answer 1

您需要从函数中返回一个值，如下所示：

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

希望有所帮助！

Answer 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创建一个数组并将其放在render方法中。如果您不了解这两点，您将无法理解它是如何工作的。

注意：您需要为地图功能中返回的每个项目传递一个唯一键。例如：

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

所以反应没有抱怨

Answer 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;

}

reactjs;映射数组后，无法渲染

3 个答案: