setState 不执行回调答案

【问题标题】：setState doesn't execute the callbacksetState 不执行回调
【发布时间】：2020-02-18 16:30:54
【问题描述】：

我有一个选择过滤器，我想按类别过滤我的产品。状态被更新但 setState 的回调没有被执行。基本上我想在状态改变时立即更新我的列表。第 31 行代码没有在 try 块中执行，它也没有捕获任何错误。

HTML

<div className="col-md-4 w-25 mt-3 ml-5">
                <Select
                  onChange={this.handleChange}
                  value={selectedCategory}
                  placeholder="Select Category"
                  options={categories}
                />
   </div>

JavaScript

    handleChange = event => {
    console.log(event.value);
    this.setState({ selectedCategory: event.value }, () => {
      try {
        products.pipe(
          map(products =>
            products
              .filter(
                product => product.category === this.state.selectedCategory
              )
              .subscribe(products => {
                console.log(products);
                this.setState({
                  items: products,
                  isLoaded: true
                });
              })
          )
        );
      } catch (error) {
        console.error(error);
      }
    });
  };

【问题讨论】：

this.setState(() => return {}, () => {callback here})
它正在执行，但是您的 this.state 和 this.setState() 从错误的来源获取上下文，因为您使用的是 function() { 而不是 () => {
@EmileBergeron 我认为这很清楚。它看起来好像它没有执行，因为this 不是他们认为的那样，所以.filter() 可能会为每个类别返回false。
@EmileBergeron this 可能是 window 和 state 可能恰好是他们应用程序中的全局变量？只是一个猜测。另一种可能是 rxjs 捕获了filter() 中抛出的异常，并从 observable 中发出 onerror 消息。
@Muj 如果它不适合你，那么edit 你的问题与你实际尝试的代码一样 minimal reproducible example 就像 Emile 上面要求的那样，并将你的问题标记为重新打开.

标签： javascript reactjs react-native rxjs

【解决方案1】：

这段代码成功了，但仍然不知道为什么它不起作用。谁能解释一下？

handleChange = 事件 => {

      this.setState(
        { selectedCategory: event.value },
        this.showFilteredProducts
      );
  };

  showFilteredProducts() {
    const filterItems = products.pipe(
      map(products =>
        products.filter(
          product => product.category === this.state.selectedCategory
        )
      )
    );
    filterItems.subscribe(products => {
      this.setState({
        items: products,
        isLoaded: true
      });
    });
  }

【讨论】：

【解决方案2】：

  handleChange = event => {
    console.log(event.value);
    this.setState({ selectedCategory: event.value }, () => { // this line right here
      products.pipe(
        map(products =>
          products
            .filter(product => product.category === this.state.selectedCategory)
            .subscribe(products => {
              console.log(products);
              this.setState({
                items: products,
                isLoaded: true
              });
            })
        )
      );
    });
  };

将此行：this.setState({ selectedCategory: event.value }, function() { 更改为 this.setState({ selectedCategory: event.value }, () => {

将其称为“函数”会更改 this 上下文。

【讨论】：

这是一个经常重复的副本。
我已经尝试过您的解决方案，但没有运气。我忘记在发布之前删除该功能。在调试期间，它从代码 product.pipe 操作符中跳转，并且 DOM 也不会重新渲染
您是否尝试过将您的 products.pipe(...) 调用包装在 try-catch 中以查看它是否出错？