我有两个组件来表示文章列表和过滤表单。每次更改任何表单字段时，我都需要发送包含所选过滤器的HTTP请求。
我有import React from 'react';
import { reduxForm, Field } from 'redux-form';
const SearchForm = ({ onFormChange }) => (
<form>
<Field component='select' name='status' onChange={onFormChange}>
<option>All</option>
<option value='published'>Published</option>
<option value='draft'>Draft</option>
</Field>
<Field
component='input'
type='text'
placeholder='Containing'
onChange={onFormChange}
/>
</form>
);
export default reduxForm({ form: 'myCustomForm' })(SearchForm);
的以下代码：
PostsList以下import React, { Component } from 'react';
import SearchForm from './SearchForm';
import { dispatch } from 'redux';
class PostsList extends Component {
constructor(props) {
super();
this.onFormChange = this.onFormChange.bind(this);
}
onFormChange() {
// Here I need to make the HTTP Call.
console.info(this.props.myCustomForm.values);
}
componentWillMount() {
this.props.actions.fetchArticles();
}
render() {
return (
<div>
<SearchForm onFormChange={this.onFormChange} />
<ul>
{ this.props.articles.map((article) => (<li>{article.title}</li>)) }
</ul>
</div>
);
}
}
const mapStateToProps = (state) => ({
myCustomForm: state.form.myCustomForm
});
const mapDispatchToProps = (dispatch) => ({
actions: {
fetchArticles: dispatch({ type: 'FETCH_ARTICLES' })
}
});
export default connect(mapStateToProps, mapDispatchToProps)(PostsList);
：
myCustomForm.values虽然渲染本身没有任何问题，但是当我更改表单时，console.log(this.props.myCustomForm.values)道具会发生一些非常糟糕的事情。
当我第一次这样做时，undefined调用返回draft，接下来的调用将返回上一个值。
例如：
undefined选项。 { status: 'draft' }已打印。draft已打印。{ status: 'published' } ... onChange已打印。我检查了redux商店和组件道具。两者都根据形式互动而改变。但我的功能是返回前一个，而不是myconfig:
type: rest
prefix: /api
resource: YourBundle\Controller\Api\YourController
name_prefix: api_ # naming collision
发送的新值。
这显然是我的代码的问题，很可能与我将函数从父组件传递给子组件的方式。
我做错了什么？
答案 0 :(得分：1)
您的功能没有任何问题。我认为发生的事情是，您第一次选择回调被触发的选项，并且控制台记录当前状态myCustomForm.values 尚未更改通过redux-form。所以当选择改变时：
因此。当你的回调正在制作console.log时，它正在打印尚未更新的商店。
这样做，你会看到它是真的：
onFormChange(e) {
// Here I need to make the HTTP Call.
console.info(e.currentTarget.value);
}
修改
我的第一个问题是，你真的需要将这个值存储在redux中并使用redux-form吗？这是一个简单的案例，您可以通过我向您展示的方式获得当前价值。
但是，如果不是这种情况，则此处不需要回调，您只需在连接的组件（PostsList）中检测到表单中的值已更改。您可以使用componentWillReceiveProps hook来实现它。
class PostsList extends Component {
constructor(props) {
super(props); // you should pass props to parent constructor
this.onFormChange = this.onFormChange.bind(this);
}
componentWillReceiveProps(nextProps) {
if(this.props.myCustomForm.values !== nextProps.myCustomForm.values) {
// do your ajax here....
}
}
componentWillMount(nextProps) {
this.props.actions.fetchArticles();
}
render() {
return (
<div>
<SearchForm />
<ul>
{ this.props.articles.map((article) => (<li>{article.title}</li>)) }
</ul>
</div>
);
}
}