Question

我有以下问题：

我想展示一些产品。当您按下“下一步”按钮时，将调用goForward（），您可以看到下一个产品。我的问题是，在按下另一个称为Submit的按钮后调用了commit（）时，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

您应该将setState与功能参数一起使用

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

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

  ++index;

  return {
    activeIndex: index
  };
});

这基本上就是您的goForward方法中发生的所有事情

这里的要点是，只要您的新状态是从旧状态派生的，就应该使用函数语法而不是对象语法。

Answer 2

我怀疑您的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>
    )
  }
}

状态不同步

2 个答案: