Question

我正在做反应组件。我在函数中有一个常见的ajax调用：

getPost = (postName, storage) => {
    this.setState({fetchInProgress: true})
    $.ajax({
       url: "/api/getitems",
       type: "GET",  
       dataType: 'json',  
       ContentType: 'application/json',
       data: {modelName: postName},
       success: (data) => {
         this.setState({
               storage: data,
               fetchInProgress: false
             })

       },  
       error: (jqXHR) => {
         this.setState({fetchInProgress: false})
         console.log('ERRORR')
       } 
    })
  }

我称之为：

this.getPost('StandartPost', this.state.standartPosts)

但它不起作用。我有很多不同类型的帖子。现在我用开关做了这个：

  success: (data) => {
         switch(postName){ 
           case: 'StandartPost'
           this.setState({
               standartPosts: data,
               fetchInProgress: false
             })
           ...and so on
         }
       }

这里我没有使用我函数的第二个参数。但也有太多的代码。有没有办法这样做：

success: (data) => {
             this.setState({
                   storage: data,
                   fetchInProgress: false
                 })

           }

this.getPost('StandartPost', this.state.standartPosts)

UPD ：我只是尝试将this.state.something用作this.setState方法中的键：

                 this.setState({
                   this.state.data: data,
                   fetchInProgress: false
                 })

好吧，它没有做任何事情。 this.state.data仍然是一个空数组。

UPD2 ：我在ajax调用中完成了以下操作：

success: (data) => {
         this.state[storage] = data
         this.setState({
           fetchInProgress: false
         })

并调用函数getPost（postName，storage），如下所示：

this.getPost('StandartPost', 'standartPosts')

它工作正常。我找不到在setState方法中设置数据的方法。但至少代码较少。

Answer 1

Do not modify state directly。您应该只在构造函数中直接指定状态。

使用ES6，您可以通过将变量包装在方括号中来设置使用变量作为对象键，如下所示：

ps auxwww | grep postgres
ec2-user 10117  0.0  0.1 110460  2068 pts/0    S+   21:43   0:00 grep --color=auto postgres

如果没有，您可以创建一个新对象，比如this.setState({ [storage]: data, fetchInProgress: false });，并将其传递到newState：

setState

如何在函数内部改变状态

1 个答案: