Reactjs 如何在状态值更改时更新子组件

我知道这个问题在react中很常见，但这有点不同

我通过从下拉列表中选择我的产品，动态生成我的产品的条形码，如下所示：

首先，state的值是example，但它会随着on select event from下拉列表的变化而变化

当我的页面呈现时，首先它生成条形码，例如，但我的值通过选择下拉菜单而改变。它将为我的下一个值生成条形码。有代码和库

class QRCodePage extends Component {
  constructor() {
    super();
    this.state = {
      productid: "exaple"
    };
  }
  setQRCode(event) {
    this.setState = {
      productid: event.target.value
    };
  }
  render() {
    return (
      <div>
        <FormControl
          componentClass="select"
          placeholder="Select Product"
          onChange={this.setQRCode.bind(this)}
          required
        >
          <option value="">select</option>
          {this.props.products.map((product, i) =>
            <option key={i} value={product._id}>
              {product.productName}
            </option>
          )}
        </FormControl>
        <Barcode value={this.state.productid} />
      </div>
    );
  }
}

---

试着这样做。它不能解决这个问题，但它更干净，代码更好。也试着这样做，告诉我控制台说了什么

class QRCodePage extends Component {
  state = {
    productid: "exaple"
  };
  setQRCode = event => {
    //Note the arrow function, which binds the function to the component.
    //This way you can use "this" in the correct scope
    this.setState(
      {
        productid: event.target.value
      },
      () => {
        console.log(this.state.productid);
      }
    );
  };

  render() {
    return (
      <div>
        <FormControl
          componentClass="select"
          placeholder="Select Product"
          onChange={this.setQRCode}
          required
        >
          <option value="">select</option>
          {this.props.products.map((product, i) =>
            <option key={i} value={product._id}>
              {product.productName}
            </option>
          )}
        </FormControl>
        <Barcode value={this.state.productid} />
      </div>
    );
  }
}

---

试着这样做。它不能解决这个问题，但它更干净，代码更好。也试着这样做，告诉我控制台说了什么

class QRCodePage extends Component {
  state = {
    productid: "exaple"
  };
  setQRCode = event => {
    //Note the arrow function, which binds the function to the component.
    //This way you can use "this" in the correct scope
    this.setState(
      {
        productid: event.target.value
      },
      () => {
        console.log(this.state.productid);
      }
    );
  };

  render() {
    return (
      <div>
        <FormControl
          componentClass="select"
          placeholder="Select Product"
          onChange={this.setQRCode}
          required
        >
          <option value="">select</option>
          {this.props.products.map((product, i) =>
            <option key={i} value={product._id}>
              {product.productName}
            </option>
          )}
        </FormControl>
        <Barcode value={this.state.productid} />
      </div>
    );
  }
}

---

你试过setQRCode中的console.logevent.target.value吗？这个.setState是一个函数，你不应该给它赋值。是的，我检查了它，console.logevent.target.value从下拉列表中给出了正确的值，但它没有更新我的状态。我不知道您是否在setQRCode中尝试了console.logevent.target.value？this.setState是一个函数，您不应该为它分配内容是的，我检查了它，console.logevent.target.value从下拉列表中提供了正确的值，但它没有更新我的状态。我不知道yonChange={this.setQRCode.bindthis}？@Andrew你是什么意思？他绑定了setQRCode，可能不正确，但这应该能用。@Andrew是的，它能用，但箭头函数在这种情况下更好。您不希望每次调用都绑定此函数。使用箭头声明执行一次，您就可以go@Andrew请你给我一票好吗。我需要50分才能发表评论。而且@Fez Vrasta是对的。setState使用错误OnChange={this.setQRCode.bindthis}？@Andrew你是什么意思？他绑定了setQRCode，可能不正确，但应该可以。@Andrew是的，它可以工作，但箭头函数在这种情况下更好。您不希望每次调用都绑定此函数。使用箭头声明执行一次，您就可以go@Andrew请你给我一票好吗。我需要50分才能发表评论。而且@Fez Vrasta是对的。设置状态使用错误