代码之家 › 专栏 › 技术社区 › dns_nx

ajax请求后的填充状态属性

state reactjs arrays

dns_nx · 技术社区 · 6 年前

我有个问题 reactjs 是的。我想添加另一个属性( productGroups )到现有状态( this.state.mainProductGroups -类型 object array ). 所以我想找出数组中相应的条目并将新属性添加到其中。这是我的职责:

getProductGroups(mainProductGroupId) {
    $.ajax({
        type: "POST",
        context:this,
        dataType: "json",
        async: true,
        url: "ajax.php",
        data: ({ 
            requestType: 'getProductGroups',
            countryID: this.state.countryObject.countryNo,
            languageID: Language[this.state.currentLanguage].languageNo,
            mainProductGroupID: mainProductGroupId,
        }),
        success: function (data) {
           let mainProductGroups = this.state.mainProductGroups;
           let mainPGFound = false;
           let mainPG = mainProductGroups.filter(mainProductGroup => mainProductGroup.id == mainProductGroupId);
           mainPG.productGroups = data.productGroups;
           this.setState({
              mainProductGroups: mainProductGroups,
           });

        }
    });
  }

下面是 this.state.main产品组 以下内容:

现在的问题是, productsGroup 未填充属性。ajax请求返回正确的值(还输入 对象数组 )中。为什么不更新?是否有问题,因为属性的初始值 产品组 是 string 现在我想用一种 对象数组 ? 我做错什么了吗?我是不是想错了? 谢谢你的帮助!

4 回复 | 直到 6 年前

Manoz 6 年前

把你的成功管理者改成这个

 success: function (data) {}

从这个

 success: (data)=> {}

当你在写作时设置状态 function 这是一个新的范围 this 回调中的上下文。所以它找不到 这 作为 这 从上下文来看您需要的是具有箭头功能的词汇范围。这是你在这个案子中需要的东西。

问题是

一般来说,如果你在写ES5的话,可以用 Function.prototype.bind从另一个作用域获取此值更改函数执行上下文主要用于在不同范围内回调。

查看更多 here

MinimumViablePerson 6 年前

马诺兹说得对 this 在常规函数中丢失上下文。我只想更进一步一点,把这个函数提取到它自己的组件方法中,所以你会得到这样的结果:

updateMainProductGroups = data => {
   const { mainProductGroups } = this.state;
   const mainPG = mainProductGroups.find(mainProductGroup =>
        mainProductGroup.id === mainProductGroupId
   );
   mainPG.productGroups = data.productGroups;

   this.setState({ mainProductGroups });
}

getProductGroups(mainProductGroupId) {
    $.ajax({
        type: "POST",
        context: this,
        dataType: "json",
        async: true,
        url: "ajax.php",
        data: ({ 
            requestType: 'getProductGroups',
            countryID: this.state.countryObject.countryNo,
            languageID: Language[this.state.currentLanguage].languageNo,
            mainProductGroupID: mainProductGroupId,
        }),
        success: updateMainProductGroups
    });
}

注意:我删除了这一行 let mainPGFound = false; 它似乎不在这个函数中使用,我也改变了 filter 到 find ,因为您似乎想要对返回的对象进行操作,并且 滤波器 实际上会给你一个里面有这个对象的数组。

dns_nx 6 年前

我的最终解决方案是这个。

getProductGroups(mainProductGroupId) {
    $.ajax({
        type: "POST",
        context:this,
        dataType: "json",
        async: true,
        url: "ajax.php",
        data: ({ 
            requestType: 'getProductGroups',
            countryID: this.state.countryObject.countryNo,
            languageID: Language[this.state.currentLanguage].languageNo,
            mainProductGroupID: mainProductGroupId,
        }),
        success: (data) => {
          let mainProductGroups = this.state.mainProductGroups.map((mainProductGroup) => {
            if(mainProductGroup.id === mainProductGroupId) {
              mainProductGroup.productGroups = data.productGroups;
            }
            return mainProductGroup;
          });
          this.setState({
             mainProductGroups: mainProductGroups,
          });
        }
    });
  }

我想,原因是我没有改变国有资产 mainProductGroups 在我的第一个解决方案中。现在一切正常。谢谢大家的帮助。

MaddEye 6 年前

改变

this.setState({
    mainProductGroups: mainProductGroups,
});

到

this.setState({
   mainProductGroups: mainPG.productGroups
});