this.state.elements.map 不是函数[重复]答案

【问题标题】：this.state.elements.map is not a function [duplicate]this.state.elements.map 不是函数[重复]
【发布时间】：2019-05-30 18:17:51
【问题描述】：

我正在尝试在文本框中输入值并通过设置反应状态在单击按钮时打印它们。我正在推送数组中的对象，该对象在文本框的值正在推送但未映射的状态下初始化。它给出错误 this.state.elements.map is not a function

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
     this.state = {
       elements: [
        {element1 :"A",element2: "A"},
        {element1 :"B",element2: "B"},
        {element1 :"C",element2: "C"},
        {element1 :"D",element2: "D"}

       ],
    }
    this.elementInput = "";
    this.elementInput_2 = "";

}
addItems()
  {
    debugger
    this.setState({
     elements : this.state.elements.push({
       element1 : this.elementInput.value ,
       element2 : this.elementInput_2.value
     })

   })
   console.log()
  }
  render() {
    return (
      <div>
       <input type="text" placeholder="Enter Element" ref={(input) => this.elementInput = input} />
       <input type="text" placeholder="Enter Element" ref={(input) => this.elementInput_2 = input} />
       <button onClick={this.addItems.bind(this)}>Add</button>
       {
          this.state.elements.map((item,index)=> {
            return  <p key={index}>{item.element1 + " " + item.element2}</p>
          })
        }
      </div>
    );
  }
}

export default App;

【问题讨论】：

你可以用.concat()代替.push()；它返回新数组。无论如何，这里最重要的是要了解该错误意味着this.state.elements 不再是一个Array，并且要对其进行调试，您需要找到导致此错误的行。如果你不学习如何阅读错误信息，你会一直这样陷入困境。

标签： javascript reactjs

【解决方案1】：

改变

this.state.elements.push({
    element1 : this.elementInput.value ,
    element2 : this.elementInput_2.value
})

到

[...this.state.elements, {
    element1 : this.elementInput.value ,
    element2 : this.elementInput_2.value
}]

在您的addItems 代码中，您将Array#push 的输出分配给elements。它返回新数组的length，而不是新数组。

正如下面comment中所说，如果需要访问之前的状态，建议使用设置状态的回调方式，比如

this.setState(prevState => ({
  elements: [
    ...prevState.elements,
    {
      /* New object */
    }
  ]
}));

【讨论】：

当你想访问之前的状态元素时，使用 setState 和回调和 prevState

【解决方案2】：

当你设置状态时，你的问题就在这里

this.setState({
    elements : this.state.elements.concat([{
      element1 : this.elementInput.value ,
      element2 : this.elementInput_2.value
    }])
  })

push 返回数组的新长度，因此state.elements 不再是数组。

您可以使用 spread 来代替。我还使用回调模式来使用先前的状态。

this.setState(st => {
    return {
      elements : [  
        ...st.elements, 
        {
          element1 : this.elementInput.value ,
          element2 : this.elementInput_2.value
        }
      ]  
    }
  })

另一种方法是使用concat

elements : st.elements.concat(
     {
       element1 : this.elementInput.value ,
       element2 : this.elementInput_2.value
     }))

【讨论】：

push 返回被推送的元素，不，它是数组的下一个长度
啊，是的，谢谢你纠正我！

【解决方案3】：

在这里，您使用函数push 改变this.state.elements 的引用，并返回数组的下一个长度。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

要解决您的问题，您可以使用 concat 函数：

addItems() {     
  this.setState({
    elements : this.state.elements.concat([{
      element1 : this.elementInput.value ,
      element2 : this.elementInput_2.value
    }])
  })
}

【讨论】：