Question

在用户设置中，我在Redux表单中使用checkbox。效果很好，但是在与本地状态一起使用以更新文本时会发生此问题。

我正在尝试为<label />而不是`添加样式。所以我必须像这样用本地状态切换设计：

  constructor(props) {
    super(props);
    this.state = {
      isSex: true
    };
  }

  onToggle = () => {
    const { isSex } = this.state;
    this.setState({
      isSex: !isSex
    });
  };

  renderCheckBox() {
    const { isSex } = this.state;
    if (isSex) {
      return (
        <div>
          <i class="fas fa-male"></i> male
        </div>
      );
    } else {
      return (
        <div>
          <i class="fas fa-female"></i> female
        </div>
      );
    }
  }

  render() {
    return (
        <div className="formItem">
          <p>Sex</p>
          <div className="checkToggle">
            <label
              className="btn"
              htmlFor="is_sex"
              onClick={() => this.onToggle()}
            >
              {this.renderCheckBox()}
            </label>
            <Field
              name="is_sex"
              id="is_sex"
              component="input"
              type="checkbox"
            />
          </div>
        </div>
   )
  }

但是我无法将用Redux获取的全局状态设置为本地状态。我在下面的matStateToProps中尝试过，但发生错误。

const mapDispatchToProps = { fetchUser };

function mapStateToProps({ user }) {
  return {
    initialValues: {
       is_sex: user.is_sex
    }
    this.setState({ isSex: user.is_sex });
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(reduxForm({ form: "userForm", enableReinitialize: true })(Settings));

Answer 1

在我看来问题在这里：

function mapStateToProps({ user }) { // 1. <----issue 
  return {
    initialValues: {
       is_sex: user.is_sex
    }
    this.setState({ isSex: user.is_sex }); // 2. <----Big issue
  };
}

在这一行中，您正在根据状态破坏用户属性。
事实"this"不会引用组件。

调度员中除此以外的其他信息：

const mapDispatchToProps = { fetchUser };

如果此fetchUser是更新状态/存储的方法，则您必须调度一些操作。像：

const mapDispatchToProps = dispatch => { 
      return {
        fetchUser : ()=> dispatch(fetchAction()) 
      };
}

无法将全局状态从reduxForm设置为本地状态

1 个答案: