映射在陣列返回[對象的對象]

我有一個Keypad部件，每次我按下一個按鈕，它應該按鈕的值添加到一個數組：映射在陣列返回[對象的對象]

var keys = this.props.keys.map(function(k, index){ 
     return (
      <tr className="button-row" key={index}> 
       <td> 
        <button 
         className="keypad-buttons" 
         onClick={self.props.number.bind(null, k.k)} 
         >{k.k}</button> 
       </td> 
      </tr> 
     ) 
    })

以我主要App分量I有一種方法加入由Keypad輸入的號碼，這樣我可以映射了他們，並在的textArea我Screen組件顯示出來。這裏是App相關部分：

getInitialState: function(){ 
    return {numbers: []} 
}, 
addNumber: function(num){ 
    var number = [ 
    { 
     n: num 
    } 
] 
    this.setState({ 
    numbers: this.state.numbers.concat(number) 
}) 
},

在Screen成分，我試圖映射在從App這樣獲得的道具：

var pinNumbers = this.props.pin.map(function(num, index){ 
     return (
       <span key={index}>{num.n}</span> 

       ) 
    }).join(' ')

，然後顯示在textArea做value={pinNumbers}。所以，如果我的小鍵盤上鍵入1 2 3，它應該映射對象的陣列之上，並顯示在每個我的Screen分量的textArea那些值（123）的;相反，它顯示[對象對象]，我不明白爲什麼。這裏是一個演示：http://codepen.io/p-adams/pen/PzZWJJ

來源

2016-07-24 Mahmud Adam

的問題是在此代碼

var pinNumbers = this.props.pin.map(function(num, index){ 
     return (
       <span key={index}>{num.n}</span>  
       ) 
    }).join(' ');

它包含JSX。讓我們來解析JSX，看看在那個片段中實際發生了什麼。

<span key={index}>{num.n}</span>將巴貝爾被transpiled到

React.createElement(
    "span", 
    { key: index }, 
    num.n 
);

。您可以通過在線Babel REPL進行驗證。

因此，你必須作出反應，你轉換爲字符串元素的數組（接收明顯[Object object]），並用空格加入。

其實，你嘗試添加跨度是沒有意義的，因爲你不能嵌入HTML格式文本域成。這件工作對我來說

var pinNumbers = this.props.pin.map(function(num, index){ 
    return num.n; 
}).join(' ');

來源

2016-07-24 03:29:44 Alik

映射在陣列返回[對象的對象]

回答

相關問題