状态不同步答案

【问题标题】：State is not synchronized状态不同步
【发布时间】：2018-10-17 11:24:59
【问题描述】：

我有以下问题：

我想展示一些产品。当您按下 Next 按钮时，将调用 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))
);

【问题讨论】：

对不起，但我看不到在渲染方法中的任何地方使用state.activeIndex。甚至使用goForward 方法。而且，你的构造函数中不会是this.goForward = this.goForward.bind(this);吗？
@SajalPreetSingh this.goForward = this.goForward.bind(this);在构造函数中使用。我也在 goForward() 中使用 this.state.activeIndex。我在渲染方法（）中不需要它。我只想要它的初始值。
如果你能分享一个小提琴，我们将不胜感激。
@KathrineHanson 这是一个有效的redux-form fiddle。您可以分叉它并创建一个工作示例。为了支持你，这对我们所有人都有帮助。

标签： reactjs react-native redux react-redux redux-form

【解决方案1】：

您应该使用带有功能参数的 setState

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

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

  ++index;

  return {
    activeIndex: index
  };
});

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

这里的重点是，无论何时您的新状态是从旧状态派生的，您都应该使用函数语法而不是对象语法。

【讨论】：

我刚刚进行了更改，productId 再次保持其初始值。

【解决方案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>
    )
  }
}

【讨论】：