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

Question

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

var InsertArray = React.createClass({ getInitialState: function () { return { Students: [], Fname: '', Lname: '', 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
    })
},

//这是使用push将数据推送到Student数组的地方。

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'));

Answer 1

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

检查这个片段：

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]

要解决您的问题，请使用扩展运算符并将新值放入数组：

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

查看有关扩展运算符的更多详细信息：React 中的这三个点做什么？