Question

所以，我有一个users状态，它从后端填充了一组对象。说，我想从该阵列更新特定用户对象的详细信息，然后使用更新的详细信息更新当前状态。我该怎么做呢？

我目前所做的是在更新请求成功再次更新状态后强制从服务器重新提取，但我想知道是否有更好的方法来执行此操作而无需再次从服务器重新获取。

例如，在下面的代码中。我想更新PersonTwo的年龄。

state = {
  users: [
    {
      name: PersonOne,
      age: 1
    },
    {
      name: PersonTwo,
      age: 1
    }
  ]
}

Answer 1

最好的方法是立即执行，首先将值发送到服务器，然后从数据库中获取最新数据，因为如果在服务器上成功更新之前更新视图，最终可能会显示哪个实际上并不存在。您的服务器可能不接受该更改，但不知何故您更新了用户请求的视图。这不是一件好事，但如果您仍想这样做，请按照以下步骤操作：

步骤1：检查完成用户数据更新的数组索引，然后

const newArray = Array.from(this.state.oldArray);
newArray[i] = 'test';

步骤2：将这个新数组分配给旧数组：

this.setState({oldArray: newArray})

Answer 2

我们假设您的对象中有id字段。您可以使用map函数返回新数组并将其保存到您的状态。

updateUser(userId){
  const updatedUsers = this.state.users.map( (user) => {
        if(userId !== user.id) {
            return user;
        }
        return {
            ...user,
            //write some updated info here, for example:
            age: 40
        }
    }):  
    this.setState({
        users: updatedUsers
    }); 
});

Answer 3

您可以使用函数setState作为POST / PUT调用的成功回调。

this.setState(prevState => {
   users: ... // operation using prevState.users
})

ReactJS：从状态中的对象数组更新特定对象

3 个答案: