Question

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

var InsertArray = React.createClass（{       getInitialState：function（）{           返回{               学生们： []，               Fname：＆＃39;＆＃39;，               Lname：＆＃39;＆＃39;，               Id：＆＃39;＆＃39;，           }       }，
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
    })
},
//这是通过使用将数据推送到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（＆＃39;容器＆＃39;））;

Answer 1

使用'concat'：

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

Answer 2

问题是，array.push不会返回最后一个数组，它将返回数组的长度。

检查此代码段：

＆＃13;

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]

＆＃13;

要解决问题，请使用spread operator并将新值添加到数组中：

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

检查以获取有关传播运营商的更多详细信息：What do these three dots in React do?

Answer 3

Array.push将返回数组的新长度，因此：

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

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

Answer 4

在案例中使用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()更好，因为它非冗长，并且行数较少。

Answer 5

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

由于状态的不变性，为什么它会有效地反应设置状态方法。

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

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

未捕获的TypeError：this.state.Students.push不是函数，this.state.Students.map不是函数

5 个答案: