在数组上映射返回 [object Object]

IT技术 javascript reactjs
2021-05-01 04:55:30

我有一个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这样收到的props：

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

                )
    }).join(' ')

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

1个回答

问题出在这段代码中

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(' ');
其它你可能感兴趣的问题
上一篇使用 React 组件内的 <a> 标签锚定导航 下一篇避免每次刷新页面时keycloak回调过程