React 工具包查询。调度工作不正确

Question

在“for”循环内，“getKeys”函数应创建 POST 请求，并在响应中更新“encryptedKeys”状态。但是 slice 中的状态正在被新值覆盖，而旧值正在从状态中消失。

function DragDrop() {
  const dispatch = useDispatch();
  const files = useSelector((state) => {
    return state.file.uplaodedFiles;
  });
  const encryptedKeys = useSelector((state) => {
    return state.file.encryptedKeys;
  });
  const [createEncryptionKey, results] = useCreateEncryptionKeyMutation();

  const getKeys = async () => {
    try {
      const data = await createEncryptionKey().unwrap();
      if (data) {
        dispatch(setEncryptedKeys([...encryptedKeys, data]));
      }
    } catch (err) {
      console.log(err);
    }
  };

  const handleChange = (file) => {
    let arr = [];
    for (let i = 0; i < file.length; i++) {
      getKeys();
      const data = {
        file: file[i],
      };
      arr.push(data);
    }
    dispatch(setUplaodedFiles([...files, ...arr]));
  };

如果我上传 3 个文件，只有一个会处于“encryptedKeys”状态，但实际上应该有 3 个文件。

Answer 1

您似乎遇到了一个问题，即当您期望所有三个文件都存在时，只有一个加密密钥存储在“加密密钥”状态中。该问题源于循环内 getKeys 函数的异步性质。由于 getKeys 是一个异步函数，因此当收到响应并调用调度来更新状态时，循环已经继续到下一次迭代。这会导致只有一个键被添加到状态中。