从 mapStateToProps 到 setState [重复]答案

【问题标题】：From mapStateToProps to setState [duplicate]从 mapStateToProps 到 setState [重复]
【发布时间】：2019-01-03 17:40:47
【问题描述】：

是否可以从 mapStateToProps 设置属性并使用 setState 更改状态并将该信息保存到我的数据库中？数据是从 google book api 返回的，我想保存一小部分数据。

我的状态：

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

设置状态并保存到数据库的功能

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 = <BookInfo book={book} onClick={onSave} />;
    }

savedData 返回未定义

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

【问题讨论】：

因为this.setState() 不返回任何内容。无论您想从中获取什么-您都不会，因为 setState() 不会给您:)

标签： reactjs react-redux

【解决方案1】：

为了将save 某些内容发送到数据库，您根本不需要调用setState()。 State 和 Props 只是 React 用来管理数据和与数据交互的机制（这是一个过于粗略的简化）。

查看您的代码，您只需要将您的 book 对象转换为更小/不同的格式。

saveData = () => {
    // The code below just shows intention and shouldn't be used as is.
    let book = this.props.book
    let bookToSave = {
            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
        }
    this.props.save(bookToSave, this.props.history);
}
render() {
    <BookInfo book={this.props.book} onSave={this.saveData} />
}

我对你的流程的理解似乎是：

您调用的 API 会为您提供大量数据
您在屏幕上显示此数据
您允许用户保存它

根据上述情况，我认为您不需要将书复制到状态中。

【讨论】：

【解决方案2】：

如果你想记录 savedData 你需要像这样使用 setState 回调：

 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(this.state)
                 this.props.saveBook(this.state, this.props.history);
               });

【讨论】：