Состояние не синхронизировано

Question

У меня следующая проблема:

Я хочу показать некоторые товары.Когда вы нажимаете кнопку «Далее», вызывается goForward (), и вы видите следующий продукт.Моя проблема заключается в том, что когда submit () вызывается после нажатия другой кнопки с именем Submit, переменная values ​​не содержит текущий productId показанного продукта.Вместо этого он содержит свое первоначальное значение.Что не так?

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
        activeIndex: 0
    };
    this.submit = this.submit.bind(this);
    this.goForward= this.goForward.bind(this);
  }

  submit(values) {
    console.log(values);
  }

  goForward() {
    let index = this.state.activeIndex;
    let productsSize = products.length - 1;

    if (index === productsSize) {
      index = -1;
    }

    ++index;

    this.setState({
      activeIndex: index
    });
  }

  render() {
      <form onSubmit={handleSubmit(this.submit)} name="edit">
          {this.props.products.map((product, index) => (
          <ProductDetails
          productId={product.productId}
          price={product.price}
          />
          ))}
    </form>
  }


let MyProductComponent = reduxForm({ form: "edit", enableReinitialize: true
})
(MyComponent);

const mapStateToProps = (state, ownProps) => {
  return {
    initialValues: {
      productId: formValueSelector("edit")(
        state,
        "activeIndex"
      )
    }
  };
};

MyProductComponent = withRouter(
  connect(mapStateToProps)(toJS(MyProductComponent))
);

Answer 1

Я подозреваю, что ваш handleSubmit (который вы не включили, так что трудно точно сказать, что происходит) не вызывает preventDefault, и ваша форма фактически отправляется и перезагружает страницу - давая вамснова начальное значение.

Вот быстрый примерный компонент (основанный на вашем), но он использует preventDefault и показывает, что ваша логика состояния работает правильно:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0
    };
    this.submit = this.submit.bind(this);
    this.goForward = this.goForward.bind(this);
  }

  submit(e) {
    e.preventDefault();
  }

  goForward() {
    let index = this.state.activeIndex;
    let productsSize = this.props.products.length - 1;

    if (index === productsSize) {
      index = -1;
    }

    ++index;

    this.setState({
      activeIndex: index
    });
    console.log(this.state.activeIndex);
  }

  render() {
    return (
      <form onSubmit={this.submit} name="edit">
        {this.props.products.map((product, index) => (
          <div key={product}>{product}</div>
        ))}
        <button onClick={this.goForward}>FWD</button>
      </form>
    )
  }
}

Answer 2

вы должны использовать setState с функциональным параметром

this.setState(oldState => {
  let index = oldState.activeIndex;
  let productsSize = products.length - 1;

  if (index === productsSize) {
    index = -1;
  }

  ++index;

  return {
    activeIndex: index
  };
});

, это, по сути, все, что происходит в вашем goForward методе

Суть в том, что всякий раз, когда ваше новое состояние получается изстарое состояние, вы должны использовать функциональный синтаксис вместо синтаксиса объекта.