如何将 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 });
        })
}