从mapStateToProps到setState

11 浏览
0 Comments

从mapStateToProps到setState

可以通过mapStateToProps设置属性并使用setState来改变状态并将信息保存到数据库吗？数据是从Google Books API返回的，我想保存其中的一小部分数据。

我的状态：

state = {
    title: '',
    subtitle: '',
    authors: '',
    description: '',
    thumbnail: '',
    buyLink: ''
};

设置setState和保存到数据库的函数

let { book } = this.props.book;
    let bookInfo;
    if (book !== null) {
        const onSave = (e) => {
            e.preventDefault();
        let savedData = this.setState({
                title: book.volumeInfo.title,
                subtitle: book.volumeInfo.subtitle,
                authors: book.volumeInfo.authors,
                description: book.volumeInfo.description,
                thumbnail: book.volumeInfo.imageLinks.thumbnail,
                buyLink: book.saleInfo.buyLink
            });
            console.log(savedData);
        };
        // this.props.saveBook(savedData, this.props.history);
        bookInfo = ;
    }

savedData返回undefined

const mapStateToProps = (state) => ({
  book: state.books
 });

0

2 答案

0 Comments

从mapStateToProps到setState的问题出现的原因是，当使用this.setState来更新组件的状态时，由于setState是一个异步操作，所以在setState执行完之前，无法立即获得更新后的状态。这就导致了在setState之后立即访问this.state的值时，可能得到的是更新之前的值，而不是更新后的值。

为了解决这个问题，可以使用setState的回调函数来确保在获取更新后的状态时，setState已经执行完毕。在回调函数中，可以访问到更新后的状态，并进行相应的操作。

具体的解决方法是，在调用setState时，传入一个回调函数作为第二个参数。在这个回调函数中，可以通过this.state来获取到更新后的状态，并进行相应的操作。在上述示例代码中，回调函数中使用console.log来输出更新后的状态，并调用this.props.saveBook来保存更新后的状态。

通过使用setState的回调函数，可以确保在获取更新后的状态时，已经完成了setState的操作，避免了获取到旧状态的问题。这样可以保证在更新状态后，进行后续操作时，所使用的状态都是最新的。

0
0 Comments

问题的出现原因：

问题似乎是由于不必要地使用了setState()方法，而不是直接将数据保存到数据库中。根据代码的情况来看，只需要将book对象转换为更小/不同的格式即可。

解决方法：

根据上述代码的理解，解决方法如下：

1. 调用API获取大量数据；

2. 在屏幕上展示这些数据；

3. 允许用户保存数据。

基于以上情况，没有必要将book复制到状态中。

0