数组上的映射返回[object object]

Mapping over array returns [object Object]

本文关键字：object 返回 映射 数组      更新时间：2023-09-26

我有一个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组件中，我有一种将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(' ')

然后通过执行value={pinNumbers}将其显示在textArea中。因此，如果我在键盘上键入1 2 3，它应该映射到对象阵列上，并在我的Screen组件的textArea中显示这些值中的每一个（123）；相反，它显示[object object]，我不知道为什么。下面是一个演示：http://codepen.io/p-adams/pen/PzZWJJ

问题出在这个代码中

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>将被传送到

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

巴别尔。您可以在在线Babel REPL中验证这一点。

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

实际上，您尝试添加跨度是没有意义的，因为您不能将HTML格式嵌入到文本区域中。这件作品适合我

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