reactjs - 从 mapStateToProps 到 setState
问题描述
是否可以从 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
});
解决方案
为了对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,它会为您提供大量数据
- 你在屏幕上显示这些数据
- 您允许用户保存它
基于以上所述,我认为您不需要将书复制到状态中。
推荐阅读
- python - 根据属性 Django 的先前值更新模型(表)中的属性
- javascript - 回复特定用户写的任何消息的 Discord 机器人
- python - ModuleNotFoundError:没有名为“readline”的模块
- css - Extjs 将列项向右对齐
- python - 从 python 运行 c 代码并删除 root 访问权限
- haskell - Haskell Maybe 列表元素操作
- java - 如何在没有布局的情况下在 Android 的 Java 文件中使用字符串资源
- javascript - 使用 FileReader 将上传的图像转换为 URL
- gnuplot - Gnuplot - 尝试创建瀑布/栅栏图
- r - 在 Shiny 中检查 rhandsontable 的有效输入