如何使用 React.useState 中的 Promise 函数更新正确的模式数组？

Question

如果 React.useState 中包含数组，如何使用 Promise 函数更新状态。我写了我尝试做的简化示例

  function md5(file: any, base64?: boolean): Promise<unknown> {
    // return new Promise((resolve, reject) => { ...
    return null;
  };
  const [state, setState] = useState(
    [...Array(10).keys()].map(el => {
      return { name: `name${el}`, file: `file${el}`, hash: "" };
    })
  );
  state.forEach(el => {
    md5(el.file).then((hash: string) => {
      const newState = [
        ...state,
        {
          name: el.name,
          file: el.file,
          hash,
        },
      ];
      // console.log(state); == always not uptated
      setState(newState);
    });
  });

如果我尝试将 map 用于数组函数 returns 而不是哈希而是 Promise

Answer 1

我会使用 Promise.all 等待所有 md5 调用完成：

Promise.all(state.map(el => md5(el.file).then(hash => [hash, el])))
  .then((results) => {
    const newState = [
      ...state,
      ...results.map(([hash, el]) => ({ name: el.name, file: el.file, hash }))
    ];
    setState(newState);
  })
    .catch(handleErrors); // don't foget to catch errors

另一种选择是在 setState 中使用回调，这样 md5 之前完成的调用不会被覆盖。

const newValue = { name: el.name, file: el.file, hash };
setState(state => [...state, newValue]);

如何使用 React.useState 中的 Promise 函数更新正确的模式数组？

How to update in correct mode array using Promise function in React.useState?

arrays

typescript

reactjs

use-state