Javascript this.state.elements.map不是函数

我试图在文本框中输入值，并通过设置react state在按钮单击时打印它们。我正在推送数组中的对象，该数组初始化为文本框的值正在推送但未被映射的状态。这是一个错误。this.state.elements.map不是一个函数

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;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
要素：[
{element1:“A”，element2:“A”}，
{element1:“B”，element2:“B”}，
{element1:“C”，element2:“C”}，
{element1:“D”，element2:“D”}
],
}
this.elementInput=“”；
this.elementInput_2=“”；
}
附加项（）
{
调试器
这是我的国家({
元素：this.state.elements.push({
element1:this.elementInput.value，
element2:this.elementInput_2.value
})
})
console.log（）
}
render（）{
返回(
this.elementInput=input}/>
this.elementInput_2=input}/>
添加
{
this.state.elements.map（（项，索引）=>{
return
{item.element1+“”+item.element2}
})
}
);
}
}
导出默认应用程序；

更改

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

到

在

附加项

代码中，将的输出分配给

元素

。它返回新数组的

长度

，而不是新数组

正如下面正确提到的，如果您需要访问以前的状态，建议使用设置状态的回调方式，如

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

---

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

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

对

this.state.elements

的引用进行变异，并返回数组的下一个长度

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

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

---

您可以使用

.concat（）

而不是

.push（）

；它返回新数组。无论如何，这里最重要的是要理解错误意味着

this.state.elements

不再是数组，要调试它，需要找到导致此错误的行。如果你不学习如何读取错误消息，你会一直像这样陷入困境。当你想访问前一个状态元素时，请使用setState with callback和prevState。Spush返回被推送的元素，不，这是数组的下一个长度。是的，谢谢你纠正我的错误！

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