Невозможно установить глобальное состояние от reduxForm к локальному состоянию - PullRequest
Новая
       4

Невозможно установить глобальное состояние от reduxForm к локальному состоянию

0 голосов
/ 12 февраля 2020

В пользовательских настройках я использую checkbox в Redux Form. Это работает хорошо, но проблема возникает при использовании с локальным состоянием для обновления текста.

Я пытаюсь добавить стили к <label /> not `. Поэтому я должен переключить дизайн с локальным состоянием, например: 

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

1 Ответ

0 голосов
/ 12 февраля 2020

Мне кажется, проблема здесь: 

function mapStateToProps({ user }) { // 1. <----issue 
  return {
    initialValues: {
       is_sex: user.is_sex
    }
    this.setState({ isSex: user.is_sex }); // 2. <----Big issue
  };
}
  1. В этой строке вы деструктурируете пользовательское свойство из состояния.
  2. Infact "this" не будет ссылаться на компонент .

Кроме этого в вашем диспетчере: 

const mapDispatchToProps = { fetchUser };

Если этот fetchUser является методом обновления состояния / хранилища, то вам нужно выполнить какое-то действие. как: 

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