Question

我希望有人可以向我解释如何获取表格中提交的信息以显示在卡组件中？从某种意义上说，这是一个光荣的待办事项清单，但我想知道什么是最佳做法（即从数据库或商店中获取数据...？）

import React from 'react';
import { connect } from 'react-redux';
import { saveItem } from '../actions/index';
import { withRouter } from 'react-router-dom';

class AddItem extends React.Component {
	
	render() {
		console.log(this.props);
		return(

	<form onSubmit={(event) => {
		event.preventDefault()

		const input = {
			name: event.target.itemName.value,
			price: event.target.itemPrice.value,
			description: event.target.itemDescription.value, 
			userEmail: this.props.currentUser.email
		}

		this.props.dispatch(saveItem(input))
		
		event.target.itemName.value = ''
		event.target.itemPrice.value = ''
		event.target.itemDescription.value = ''
	}}>
				<label>
					Item Name:
					<br />
					<input type="text" name="itemName" />
				</label>
				<br />
				<label>
					Price:
					<br />
					<input type="text" name="itemPrice" />
				</label>
				<br />
				
				<br />
				<label>
				Description:
					<br />
					<textarea type="text" name="itemDescription"/>
				</label>
				<br />
				<button>Submit</button>
			</form>
		)
	}
}

const mapStateToProps = state => ({
    currentUser: state.auth.currentUser
});
	
	export default withRouter(connect(mapStateToProps)(AddItem));

因此，基本上，我需要所有这些信息来在用户点击“提交”时显示在容器中。

Answer 1

这两个选项各有利弊，主要区别是：

使用Redux商店：

刷新页面会清除存储在商店中的所有数据
数据在客户端中，意味着更好的性能
随着应用程序的增长，需要维护的麻烦->商店会变得嵌套/更大。

使用数据库：

数据可以持久保存，并且可以随时获取
获取数据需要一段时间，并且需要端点+服务器调用
更有条理

通常，使用商店存储临时数据，而使用DB存储持久数据。在实践中，您会发现自己可以交替使用这些方法，甚至可以同时使用。例如，在将数据发布到数据库之前将其副本保存在存储中，这样数据仍然可供您显示。

最后提示：https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5

如何将表单内容发布到卡组件

1 个答案: