ajax请求后填充状态属性

Question

我遇到了 React.js 的问题。我想将另一个属性 (

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.mainProductGroups

的数据示例：

现在的问题是，

productsGroup

属性没有被填充。 ajax 请求返回正确的值（也可输入

object array

）。为什么不更新？有问题吗，因为属性

productGroups

的初始值为

string

，现在我想用

object array

类型覆盖它？

Answer 1

将您的成功处理程序更改为此

 success: function (data) {}

从这里

 success: (data)=> {}

查看当您在编写

function

时设置状态时，它是回调中

this

上下文的新范围。所以它不会从上下文中找到

this

作为

this

。您需要的是带有箭头函数的词法作用域。在这种情况下，这正是您所需要的。

这里的问题是

通常，如果我们编写 ES5，我们会使用类似的东西 Function.prototype.bind 从另一个作用域获取 this 值 更改函数的执行上下文。这主要会用在 不同范围内的回调。

查看更多这里

Answer 2

Manoz 关于

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

，因为您似乎想要对返回的对象进行操作，并且

filter

将实际上给你返回一个包含该对象的数组。

Answer 3

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

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

。现在工作正常。谢谢大家的帮助。

Answer 4

改变

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

到

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