Javascript 提交后，b（array_name）.map不是一个函数-ReactJS

我已经开始学习ReactJS，我被这个错误困扰了一段时间

export default class Bag extends Component {
constructor(props){
    super(props)
    this.state = {
        books : [
            {
                name : "Origin",
                read : "Yes",
                owner: "Yes"
            },
            {
                name: "The Alchemist",
                read: "Yes",
                owner: "Yes"
            },
            {
                name : "The Tale of Twisted Candle",
                read : "Yes",
                owner: "Yes"
            },
            {
                name: "Martian",
                read: "Yes",
                owner: "Yes"
            }
        ]
    }
    this.setStateHandler = this.setStateHandler.bind(this)
    this.handleChange = this.handleChange.bind(this)
}


setStateHandler(){
    this.setState({books: this.state.books })
}

handleChange(book){
    console.log("Here is your book:")
    console.log(book)
    console.log(this.state.books)
    let tempVal = {
        name : book.name,
        read : book.read,
        owner: book.owner 
    }
    this.setState({books: this.state.books.push(tempVal) })
    console.log(this.state.books)
}

render(){
    let b = this.state.books
    return (
        <div align="center">
            <h1>{this.props.name}'s Bag</h1>
            <table>
                <tbody>
                <tr>
                    <th>Book Name</th>
                    <th>Read</th>
                    <th>Ownership</th>
                </tr>
                </tbody>

                <tbody>
                    { b.map(function(book){
                        return <Book name={book.name} read={book.read} owner={book.owner}/>
                    })}
                </tbody>
            </table>
            <BookForm name="Book" read="No" owner="No" onChange={this.handleChange} />
            <Button />    
        </div>
    )
}
}

导出默认类包扩展组件{
建造师（道具）{
超级（道具）
此.state={
书籍：[
{
名称：“原产地”，
读：“是的”，
业主：“是的”
},
{
名字：“炼金术士”，
读：“是的”，
业主：“是的”
},
{
名称：“扭曲蜡烛的故事”，
读：“是的”，
业主：“是的”
},
{
名字：“火星人”，
读：“是的”，
业主：“是的”
}
]
}
this.setStateHandler=this.setStateHandler.bind（this）
this.handleChange=this.handleChange.bind（this）
}
setStateHandler（）{
this.setState（{books:this.state.books}）
}
手变（书）{
log（“这是你的书：”）
控制台日志（book）
console.log（this.state.books）
设tempVal={
名称：book.name，
读：书，读，
所有者：book.owner
}
this.setState（{books:this.state.books.push（tempVal）}）
console.log（this.state.books）
}
render（）{
设b=this.state.books
返回(
{this.props.name}的包
书名
阅读
所有权
{b.map（函数（书）{
返回
})}
)
}
}

当代码第一次运行时，一切正常。但是当我试图提交一本新书时，抛出了一个错误

类型错误：b.map不是一个函数

在寻找其他类似问题的解决方案时，他们都提到map函数用于数组而不是对象。所以，我也检查过了。显然，提交后的新值“b”仍然是一个数组

线路：

this.setState({books: this.state.books.push(tempVal) })

在您的

handleChange

方法中，可能存在问题。

push

方法返回一个数字，因此line实际上是将您所在州的

books

的值设置为一个数字，而不是数组。您可以尝试将其更改为：

this.setState({books: this.state.books.concat([tempVal]) })

或者，如果要使用功能性

setState

样式：

this.setState(prevState => {
    prevState.books.push(tempVal);
    return prevState;
});

---

谢谢@CRice的帮助。现在，它正在成功运行。