this.state.elements.map is not a function

7 浏览
0 Comments

this.state.elements.map is not a function

我正在尝试在文本框中输入值，并通过设置React状态在按钮点击时打印它们。我正在将一个对象推入初始化在状态中的数组中，文本框的值正在被推入，但没有被映射。它报错"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, {
        element1: this.elementInput.value,
        element2: this.elementInput_2.value
      }]
    })
    console.log()
  }
  render() {
    return (
      <>
         this.elementInput = input} />
         this.elementInput_2 = input} />
        
        {
          this.state.elements.map((item, index) => {
            return 
{item.element1 + " " + item.element2}

          })
        }
      
    );
  }
}
export default App;

0

3 答案

0 Comments

在你的addItems代码中，你将Array#push的输出赋值给了elements。它返回的是新数组的长度，而不是新数组本身。

像下面评论中正确提到的那样，如果你需要访问先前的状态，建议使用回调方式设置状态，如下所示：

使用带有回调和prevState的setState当您想要访问先前的状态元素时

以下是对应的代码：

this.setState(prevState => ({
  elements: [
    ...prevState.elements,
    {
      /* 新对象 */
    }
  ]
}));

0
0 Comments

在上述内容中，出现了一个问题(this.state.elements.map is not a function)，这个问题的原因是在设置state时。具体表现为使用push方法将新元素添加到数组中后，state.elements不再是一个数组。

解决这个问题的方法有两种：

一种方法是使用spread语法来实现。同时，可以使用回调函数的方式来使用先前的状态。

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

另一种方法是使用concat方法来实现。

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

需要注意的是，push方法返回的是被推入的元素，而不是数组的下一个长度。因此，在使用push方法时会出现这个问题。

以上是解决(this.state.elements.map is not a function)问题的两种方法。

0
0 Comments

在上述代码中，问题出现在对this.state.elements的操作上，导致了(this.state.elements.map is not a function)的错误。错误的原因是通过push函数修改了this.state.elements的引用，并返回了数组的新长度。

为了解决这个问题，可以使用concat函数来代替push函数。下面是修改后的代码：

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

使用concat函数可以将新元素连接到原数组的末尾，而不会改变原数组的引用。这样就可以避免(this.state.elements.map is not a function)的错误。

0