Javascript 数组上的映射返回[对象]

我有一个

键盘

组件，每次我按下一个按钮，它都会将该按钮的值添加到一个数组中：

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

在

Screen

组件中，我试图映射从

App

收到的道具，如下所示：

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

                )
    }).join(' ')

var pinNumbers=this.props.pin.map（函数（num，index）{
返回(
{num.n}
)
}).加入（“”）

---

然后通过执行

value={pinNumbers}

将其显示在

textArea

中。因此，如果我在键盘上键入1 2 3，它应该映射到对象数组，并在我的

屏幕
组件的
文本区域
中显示每个值（123）；相反，它显示[object]，我不知道为什么。下面是一个演示：
问题出在这段代码中

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

巴贝尔。您可以在线验证这一点

因此，您有一个React元素数组，可以将其转换为字符串（接收明显的
[Object Object]
）并与空格连接

实际上，您尝试添加跨距是没有意义的，因为您无法将HTML格式嵌入文本区域。这件适合我

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

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

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