javascript - react ;映射数组后没有任何渲染

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

希望对您有所帮助!