![形式动态加载初始值]( "形式动态加载初始值")
本文介绍了以 Redux 形式动态加载初始值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用initializingFromState 在 Redux-Form 中，我试图动态设置它.这是在书籍列表中编辑特定书籍，并使用 express.js 中设置的简单 api.
完整的容器如下.我不知何故需要在 mapStateToProps 函数中传入 initialValues.在示例中，它是通过静态对象完成的，但我不知道如何使用通过 fetchBook 获取的信息，并将其传递给 initialValues.
容器:
import React, { Component, PropTypes } from 'react';从'redux-form'导入{ reduxForm };从'react-redux'导入{连接}；从反应路由器"导入{链接}；从'../actions/index' 导入 { fetchBook, editBook };类 BookEdit 扩展组件 {componentWillMount() {this.props.fetchBook(this.props.params.id);}静态上下文类型 = {路由器:PropTypes.object}提交(道具){this.props.editBook(this.props.book.id, props).then(() => {this.context.router.push('/');});}常量数据 = {标题:{this.props.book.title}，描述:{this.props.author}}使成为() {const { 字段:{ 标题，作者}，handleSubmit } = this.props;const { book } = this.props;如果(！书){返回 (<div><p>正在加载...</p>
)}返回 (<div><Link to="/">返回</Link><form onSubmit={handleSubmit(this.onSubmit.bind(this))}><h2>添加新书</h2><label>标题</label><input type="text" {...title}/><div className="text-help">{title.touched ?title.error : ''}</div><label>作者</label><input type="text" {...author}/><div className="text-help">{author.touched ?author.error : ''}</div><button type="submit">添加</button><Link to="/" className="button">返回</Link></表单>
);}}函数 mapStateToProps(state) {返回 {书:state.books.book，initialValues://我如何在这里传递书籍?};}导出默认 reduxForm({表单:'EditBookForm',字段:['标题'，'作者']}, mapStateToProps, { fetchBook, editBook })(BookEdit);
谢谢.
解决方案
您的表单值不是 state.books.book 中的内容?我想这就是你要找的一切:
function mapStateToProps(state) {返回 {书:state.books.book，初始值:state.books.book};}
由于您只是真正查看 this.props.book 以了解它是否已加载，因此执行以下操作可能更明确:
function mapStateToProps(state) {返回 {加载:!!state.books.book，初始值:state.books.book};}
希望有所帮助.
Using the example of initializingFromState within Redux-Form, I am trying to set this up dynamically. This is to edit a particular book in a list of books, and is using a simple api set up in express.js.
The full container is below. I somehow need to pass in initialValues, within the mapStateToProps function. In the example, it is done via a static object, but I can't work out how to use the information I have pulled in via fetchBook, and pass it to initialValues.
Container:
import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { fetchBook, editBook } from '../actions/index';
class BookEdit extends Component {
componentWillMount() {
this.props.fetchBook(this.props.params.id);
}
static contextTypes = {
router: PropTypes.object
}
onSubmit(props) {
this.props.editBook(this.props.book.id, props)
.then(() => {
this.context.router.push('/');
});
}
const data = {
title: {this.props.book.title},
description: {this.props.author}
}
render() {
const { fields: { title, author }, handleSubmit } = this.props;
const { book } = this.props;
if (!book) {
return (
<div>
<p>Loading...</p>
</div>
)
}
return (
<div>
<Link to="/">Back</Link>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<h2>Add a new book</h2>
<label>Title</label>
<input type="text" {...title} />
<div className="text-help">{title.touched ? title.error : ''}</div>
<label>Author</label>
<input type="text" {...author} />
<div className="text-help">{author.touched ? author.error : ''}</div>
<button type="submit">Add</button>
<Link to="/" className="button">Go back</Link>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
book: state.books.book,
initialValues: // how do I pass in the books here?
};
}
export default reduxForm({
form: 'EditBookForm',
fields: ['title', 'author']
}, mapStateToProps, { fetchBook, editBook })(BookEdit);
Thank you.
解决方案
Your form values aren't what's in state.books.book? I think this is all you're looking for:
function mapStateToProps(state) {
return {
book: state.books.book,
initialValues: state.books.book
};
}
Since you're only really looking at this.props.book to know if it's loaded or not, it might be more explicit to do something like:
function mapStateToProps(state) {
return {
loaded: !!state.books.book,
initialValues: state.books.book
};
}
Hope that helps.
这篇关于以 Redux 形式动态加载初始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！