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

【问题标题】：How to post form content to a card component如何将表单内容发布到卡片组件
【发布时间】：2019-04-28 03:16:32
【问题描述】：

我希望有人可以向我解释如何让表单中提交的信息显示在卡片组件中？在某种程度上，它是一个美化的待办事项列表，但我想知道最佳实践是什么（即从我的数据库或商店中获取数据......？）

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));

所以基本上我需要所有这些信息在用户点击提交时显示在容器中。

【问题讨论】：

标签： node.js reactjs react-redux redux-form

【解决方案1】：

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

使用 Redux 存储：

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

使用数据库：

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

一般来说，将您的存储用于临时数据，而将您的数据库用于保存重要数据。在实践中，您会发现自己可以交替使用这些方法，甚至同时使用这两种方法。例如，在将数据发布到您的数据库之前，将数据的副本保存在商店中，这样数据仍然可供您显示。

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

【讨论】：