javascript - 提交后，b(array_name).map 不是函数 - ReactJS

Question

我已经开始学习 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>
    )
}
}

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

类型错误:b.map 不是函数

在其他类似问题中寻找解决方案时，他们都提到 map 功能是针对 Array 而不是 Object。所以，我也检查过。显然，'b' 提交后的新值仍然是一个数组。

Answer 1

行:

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

在您的handleChange 方法中可能是问题所在。 push 方法返回一个数字，因此该行实际上是将您所在州的 books 的值设置为数字，而不是数组。您可以尝试将其更改为:

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

或者，如果您想使用函数式 setState 样式:

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