将来自 redux-form 的用户输入作为数组添加到状态答案

【问题标题】：Add User input from redux-form to the state as an array将来自 redux-form 的用户输入作为数组添加到状态
【发布时间】：2017-01-31 14:57:20
【问题描述】：

我正在尝试将从 redux-form 收到的数据放入我的状态。当用户提交表单时，会创建一个对象，但我无法将此数据推送到用户数组中。这是我的代码：

class UserControlPage extends Component {

  constructor(props) {
    super(props);

    this.state = { users: []};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit=(values) => {
    const newUser = this.state.users;

    newUser.push(addUser(values));

    this.setState({ users: newUser });
  }

  render() {
    return (
          <div>
            <legend>
                <span className="glyphicon glyphicon-user" aria-hidden="true"></span> User creation
            </legend>
            <UserCreation onSubmit={this.handleSubmit}/>
          </div>
        );
    }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({addUser}, dispatch);
}

function mapStateToProps(users) {
  return { users };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserControlPage);

我的第一次尝试是以下代码：

  handleSubmit=(values) => {
    this.setState({users: addUser(values)});
  }

我想问题一定是我没有正确启动用户状态或正确映射它。但我没有真正的线索。

更新： 确实成功创建了一个对象，但不幸的是，它似乎不在商店中。所以我从表单中获取了一个包含数据的用户对象，但在我的商店中，什么都没有。

【问题讨论】：

我认为您可能在这里寻找的是 redux-form 的 FieldArray 或 props.array 选项，因为它们旨在处理表单中的数组数据。此外，由于您使用的是 redux 和 redux-form，因此使用 React 的组件状态来尝试存储这些数据似乎很奇怪。
我想我的问题是我尝试将数据存储在组件状态，但我的减速器似乎没有更新我的存储。我通过 handlesubmit 函数从表单中获取数据，这样至少可以工作。

标签： redux react-redux redux-form

【解决方案1】：

我修好了。我没有正确地将我的状态映射到商店。我将 handleSubmit() 更改为：

  handleSubmit=(values) => {
    addUser(values);
  }

到

  handleSubmit=(values) => {
    this.props.addUser(values);
  }

和我的状态映射来自

function mapStateToProps(users) {
  return { users };
}

到

function mapStateToProps(state) {
  return { users: state.users };
}

我也在构造函数中删除了这一行：

this.state = { users: []};

【讨论】：