反应;映射数组后没有任何渲染

Question

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

<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

您需要 return 从您的函数中获取一个值，如下所示：

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

希望对您有所帮助！

Answer 2

试试这个

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;

}

Answer 3

您需要了解/注意两件事：

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 的函数中 return 什么并不重要，重要的是要知道当你 return 一个值时函数停止执行，这对 forEach 来说并不特别。但是当我们说你 return 不重要时，我们想指出你 return 对 Array.prototype.map 的重要性：

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

示例：

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

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

注意：您需要为地图函数中 return 的每个项目传递一个唯一键。例如：

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

这样 react 就不会报错

反应;映射数组后没有任何渲染

reactjs; after mapping an array nothing renders

javascript

reactjs

react-dom