Question

我的React类中有一个方法，但是因为我想在我的应用程序的几个类中使用它，我将它转换为一个单独的函数。现在我的问题是，在这个函数中，我使用this.setState()并希望在我的类中setState。如何从函数中调用setState()？

这是我的功能：

export const syncBasketItemsWithServer = (categoriesData, lBasketItem) => {
  if (categoriesData.has_sub_category) {
    categoriesData.categories.map((item, index)=> {
      syncBasketItemsWithServer(item, lBasketItem);
    });
  }
  if (categoriesData.category_items) {
    const exist = _.findWhere(categoriesData.category_items, {uid: lBasketItem.uid});
    if (exist) {
      lBasketItem.price = exist.price ? exist.price : categoriesData.price;
      this.setState({
        arr: this.state.arr.concat([lBasketItem])
      });
    }
  }
};

Answer 1

要实现这一点，您需要将函数与要在其中使用该函数的Component的上下文绑定。通过使用call方法作为第一个参数，您可以将函数与当前上下文绑定，因此函数体中的this将引用您的Component。

this

此外，您需要在不使用箭头函数的情况下重构函数，因为它们隐式地将函数与当前上下文绑定，在您的情况下为import { syncBasketItemsWithServer } from '../path/to/file' class SomeClass extends Component { someMethod () { syncBasketItemsWithServer.call(this, param1, param2); } }。

undefined

Answer 2

专门调用setState并不理想，理想情况下，您希望调度操作而不是 this.setState（）然后有一个reducer，根据你发送的动作为你更新状态。

这是一个链接，应该更彻底地解释事情http://redux.js.org/docs/basics/Reducers.html，并包括处理行动。

希望这适合您的项目设置。

Answer 3

我试试这个：

  import _ from 'underscore';
    export function syncBasketItemsWithServer(categoriesData, lBasketItem) {
      if (categoriesData.has_sub_category) {
        categoriesData.categories.map((item, index)=> {
          //bind again
          syncBasketItemsWithServer.call(this, item, lBasketItem);
        });
      }
      if (categoriesData.category_items) {
        const exist = _.findWhere(categoriesData.category_items, {uid: lBasketItem.uid});
        if (exist) {
          lBasketItem.price = exist.price ? exist.price : categoriesData.price;
          this.setState({
            syncedItems: this.state.syncedItems.concat([lBasketItem])
          });
        }
      }
    }

如何从函数中调用setState

3 个答案: