映射在阵列返回[对象的对象]

我有一个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

映射在阵列返回[对象的对象]

回答

相关问题