Question

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

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

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

更新一个对象确实成功创建，但不幸的是，这似乎是在商店之外。所以我从表单中获取了一个带有数据的用户对象，但是在我的商店中，没有任何内容。

Answer 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: []};

将redux-form中的用户输入作为数组添加到状态

1 个答案: