未捕获的类型错误：this.state.Students.push 不是函数，this.state.Students.map 不是函数答案

【问题标题】：Uncaught TypeError: this.state.Students.push is not a function and this.state.Students.map is not a function未捕获的类型错误：this.state.Students.push 不是函数，this.state.Students.map 不是函数
【发布时间】：2017-12-19 00:12:29
【问题描述】：

我该怎么办？，我尝试了很多方法来解决这个问题，但仍然未捕获的类型错误 .push 和 .map 不起作用。请帮我解决这个问题，这对我来说将是莫大的荣幸。

var InsertArray = React.createClass({ 获取初始状态：函数（）{ 返回 { 学生： []， Fname: '', 名称：''， ID： ''， } },
render: function () {
    return (
        <div>
            Firstname:
            <input type="text" onChange={this.handleFN} value={this.state.value} />
            <br />
            Lastname :
            <input type="text" onChange={this.handleLN} value={this.state.value}/>
            <br />
            Student Id:
            <input type="number" onChange={this.handleId} value={this.state.value} />
            <hr />
            <button type="Submit" onClick={this.handleClick}>Submit</button>
            <button type="Submit" onClick={this.handleClickD}>Display</button>
            <br />
        </div>
        );
},

handleFN : function (value) {
    this.setState({
        Fname: value
    });
},

handleLn: function (value) {
    this.setState({
        Lname:value
    });
},

handleId: function (value) {
    this.setState({
        Id: value
    })
},
//这是数据将通过使用推入学生数组的位置推。
handleClick: function (e) {
    e.preventDefault();
    var student = {
        Fname: this.state.Fname,
        Lname: this.state.Lname,
        Id   : this.state.Id
    }
    this.setState({
        `Students: this.state.Students.push(student)`
    });
},
//并且这个handleClickD会读取数组里面的所有数据并且显示。
handleClickD: function (e) {
    e.preventDefault();

        <div>
            <ul>`{this.state.Students.map(function (stud) {
                    return (<li key={stud.Id}>{stud.Fname}{stud.Lname}`
                </li>)
                }
                )}
            </ul>
        </div>
} });
ReactDOM.render(, document.getElementById('container'));

【问题讨论】：

你有没有初始化过状态？
是的，我已经初始化了状态，但仍然在 map 和 push 方法中遇到错误。
我还有 1 个问题 map()。用户单击显示按钮后，它不会显示数据。请帮助我
我建议创建一个新问题，以便您了解您的问题。

标签： javascript jquery reactjs asp.net-mvc-4

【解决方案1】：

问题是，array.push 不会返回最终的数组，它会返回数组的长度。

检查这个sn-p：

let a = [1,2,3,4,5,6];

let b = a.push(10);

console.log('b = ', b);  //b = 7 not [1,2,3,4,5,6,10]

要解决您的问题，请使用spread operator 并将新值放入数组中：

this.setState({
    Students: [...this.state.Students, student]
});

查看这里以获取有关扩展运算符的更多详细信息：What do these three dots in React do?

【讨论】：

【解决方案2】：

使用“连接”：

this.setState({Students: this.state.Students.concat(student)})

【讨论】：

我尝试使用 concat 并且它可以工作，谢谢，但是如果我想使用 push，我将如何让它工作？

【解决方案3】：

在这种情况下使用 push 的显式方式是这样的

handleClick: function (e) {
    e.preventDefault();
    var student = {
        Fname: this.state.Fname,
        Lname: this.state.Lname,
        Id   : this.state.Id
    }

    this.state.Students.push(student)
    this.setState({
        Students: this.state.students
    });
},

但是，concat() 还是要好得多，因为它不冗长，而且行数更少。

【讨论】：

【解决方案4】：

Array.push 将返回数组的新长度，所以之后：

 this.setState({Students: this.state.Students.push(student)})

学生将是一个数字而不是一个数组。

【讨论】：

你能否解释一下，因为我是新手，不太了解它的工作方式，谢谢。
表示push函数会起作用，但只会返回数组中的项数，而不是实际结果。

【解决方案5】：

Array.push() 和 splice() 是可变方法。

为什么它是 Effect 反应 Set-state 方法，因为状态的不变性。

这个原因在 Set 状态下不使用可变方法。否则，您使用 concat() 和 slice() 例如：-

this.setState({
    ...this.state,
    newServiceStrings: this.state.newServiceStrings.concat(newServiceName)
})

【讨论】：