如何將 setState 與嵌套的 JSON 數組對象一起使用

Question

我正在嘗試從 MongoDb 獲取數據，但 setState 沒有更新bookInstances

如何使用 setState 更新 bookInstances？ 每個數組基本上就像 {"id": ...}

export default class BookInstances extends Component {
constructor(props) {
    super(props)
    this.BookInstance = this.BookInstance.bind(this);
    this.BookInstances = this.BookInstances.bind(this);
    this.state = {
        bookInstances: []
    }
}

componentDidUpdate() {
    axios.get('http://localhost:3001/catalog/bookinstances')
        .then(res => {
            this.setState({ bookInstances: res.data });
        })
}

BookInstance(props) {
    return <li>{props.bookInstance}</li>
}

BookInstances() {
    const bookInstances = this.state.bookInstances;
    if (bookInstances) {
        return bookInstances.map(bookInstance => {
            return <this.BookInstance key={bookInstance} bookInstance={bookInstance.id} />
        })
    }
}

render() {
    return (
        <div>
            <h1>Book Instance List</h1>
            <ul><this.BookInstances /></ul>
        </div>
    )
}

}

感謝任何幫助？

Answer 1

不知道你現在為什么要使用類組件。盡管如此，你在錯誤的生命周期方法中設置了狀態。

您需要在componentDidMount()中獲取

componentDidMount() {
    axios.get('http://localhost:3001/catalog/bookinstances')
        .then(res => {
            this.setState({ bookInstances: res.data });
        })
}