this.setState和下面的函数甚至没有运行

Question

它不是记录"this.state.UsersAvatars1“的项目，也不是”检查“。它也没有更改数组，UsersAvatars中唯一的项是第一个对象

我能请你帮忙吗？

  newUserTypeAvatarsArray = async () => {
    const avatars = this.state.avatars.map((avatar, index) => ({
      avatar: avatar,
      isChcecked: false,
      index: index,
    }));
    console.log(avatars);
    let singleUser = {
      userType: "everyone",
      isChecked: false,
      avatars: avatars,
    };
    await this.setState(
      {
        UsersAvatars: [singleUser],
      },
      () => {
        console.log(this.state.UsersAvatars[0]);
      }
    );

    await this.state.users_types.map(async (userTypee, index) => {
      console.log("in loop users_types");
      const temporaryObject = {
        userType: userTypee,
        isChecked: false,
        avatars: avatars,
      };
      let temporaryArray = await [...this.state.UsersAvatars, temporaryObject];
      await this.setState(
        (prevState) => (
          {
            UsersAvatars: temporaryArray,
          },
          function () {
            console.log("check");
            console.log(this.state.UsersAvatars[1]);
          }
        )
      );
    });
    await this.setState({
      UsersAvatarsLoading: false,
    });
  };

Answer 1

您正在await做很多事情，但是我没有看到任何一个有意义的/等待工作的地方，正如您可能认为的那样。

要使您能够实现await，就必须返回一个承诺。async function总是会返回承诺。如果您await something，这不是一个承诺，或有一个then()-method，这个await是没有意义的。await特别不关心使用回调的函数！

1. await this.setState(...)

await this.setState(...)相当于调用this.setState(...)和await undefined;。

让我们快速解决这个问题，并使setState成为可接受的。

class Foo extends React.Component {
  setState = (arg, callback=null) => new Promise(
    resolve => super.setState(arg, resolve)
  ).then(callback)
}

出于兼容性原因，我将可选的callback参数留在了其中，但避免使用它。

2. await this.state.users_types.map(async (userTypee, index) => { ...

既然你做了array.map(async ...)，你就会得到一系列的承诺。但是遗憾的是，承诺数组仍然只是一个数组，而不是承诺本身，因此您不能await它。Promise.all()去营救。

await Promise.all(this.state.users_types.map(async (userTypee, index) => { ... })

3. let temporaryArray = await [...this.state.UsersAvatars, temporaryObject];

这基本上是一个[].concat(this.state.UsersAvatars, [temporaryObject])。我不知道你为什么认为你需要await。虽然第2点至少是一组承诺，但这仅仅是一个数组，没有任何其他承诺，也没有任何异步的承诺。把await赶出去就行了。

4. 逗号操作符

(a, b)首先执行表达式a，然后执行并“返回”表达式b。

因此，var b = (console.log("a is", a), 2*a);将首先进行日志记录，而2*a将被分配给var b。

这和你的代码有什么关系？这里：

this.setState(
  (prevState) => (
    {
      UsersAvatars: temporaryArray,
    },
    function () {
      console.log("check");
      console.log(this.state.UsersAvatars[1]);
    }
  )
);

让我重写一下：

this.setState((prevState) => {
    return (
      {
        UsersAvatars: temporaryArray,
      },
      function () {
        console.log("check");
        console.log(this.state.UsersAvatars[1]);
      }
    )
});

或

this.setState((prevState) => {
  // create an object and ignore it
  ({
    UsersAvatars: temporaryArray,
  });
  // and return the function as "object with changes to the state"
  return function () {
    console.log("check");
    console.log(this.state.UsersAvatars[1]);
  }
});

我想你是想写

this.setState({
    UsersAvatars: temporaryArray
  },
  () => {
    console.log("check");
    console.log(this.state.UsersAvatars[1]);
  }
);

很明显的错误就这么多了。

我有一种感觉，除了这些错误之外，这个函数所做的事情有些不对劲。avatars是一个数组，users_types是一个数组，users_types中的每一项都包含整个avatars数组，您可以在一个循环中调用setState .

但是我不知道你到底想在这里构建什么，以及代码应该是什么样的。

编辑：

@Meir从你的答案重构该函数

newUserTypeAvatarsArray = () => {
  const avatars = this.state.avatars.map((avatar, index) => ({ 
    avatar, 
    isChecked: false, 
    index 
  }));
  
  this.setState({
    UsersAvatars: [
      { 
        userType: "everyone", 
        isChecked: false, 
        avatars 
      },
      ...this.state.users_types.map(userType => ({ 
        userType, 
        isChecked: false, 
        avatars 
      }))
    ],
    UsersAvatarsLoading: false,
  });
}

Answer 2

不能在async/await上使用this.setState模式。即使它是异步的，它也不会返回您可以等待的承诺或东西。它会触发组件的重发，因此我怀疑您的第一个setState之后的代码甚至没有被读取。

您似乎知道setState的回调函数，所以使用它执行第二个setState。考虑将代码分成两个函数，以便更好地理解;)

这里是关于等待setState的几点解释

这是你能发现有趣的回调。

Answer 3

newUserTypeAvatarsArray = () => {
    const avatars = this.state.avatars.map((avatar, index) => ({
      avatar: avatar,
      isChcecked: false,
      index: index,
    }));
    let singleUser = {
      userType: "everyone",
      isChecked: false,
      avatars: avatars,
    };
    var temporaryUsersAvatarsArray = [singleUser];
    this.state.users_types.map((userTypee, index) => {
      console.log("in loop users_types");
      temporaryUsersAvatarsArray = [
        ...temporaryUsersAvatarsArray,
        {
          userType: userTypee,
          isChecked: false,
          avatars: singleUser.avatars,
        },
      ];
    });
    this.setState({
      UsersAvatars: temporaryUsersAvatarsArray,
      UsersAvatarsLoading: false,
    });
  };

此代码起作用:)