Promise.all не работает, как ожидалось, игнорируя нерешенное обещание - PullRequest
0 голосов
/ 27 февраля 2019

У меня есть этот код

    onRemove = (fileId) => {
        this.setState({ removing: true });
        Promise.all([this.props.onRemove(fileId)])
            .then(() => {
                console.log('I execute after');
                this.setState({ removing: false });
            })
            .catch(() => {
                this.setState({ removing: false });
            });
    }

onRemove запускается onClick из моего jsx кода следующим образом:

onClick={() => {this.onRemove(fileId);}}

По причинам простоты мой this.props.onRemove выглядит так:

    removeFile = (UUID) => {
        const sleep = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));
        return sleep(1500).then(() => {
            console.log('I execute');
        });
    };

Когда я запускаю свой код, я получаю это в своей консоли:

I execute after
I execute

Что я, конечно, предполагаю, что это неправильно!

разве Promise.all не должен ждать выполнения всех обещаний, прежде чем выполнить то, что находится в блоке then?

Чего мне не хватает, я уже некоторое время бьюсь головой о стену.

Обновление:

Я добавил return к removeFile, как и предлагали комментарии, ноповедение остается прежним.

1 Ответ

0 голосов
/ 27 февраля 2019

Код, который вы указали, работает нормально.

class ChildComponent extends React.Component {
  state = {
    removing: false
  }
  
  onRemove = fileId => {
    this.setState({ removing: true });
    Promise.all([this.props.onRemove(fileId)]).then(() => {
      console.log('I execute after');
      this.setState({ removing: false });
    })
      .catch(() => {
        this.setState({ removing: false });
      });
  };

  render() {
    return (
      <button onClick={() => { this.onRemove('fileId');}}>
        Remove File
      </button>
    );
  }
}

const ParentComponent = () => {
  const removeFile = UUID => {
    const sleep = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));
      return sleep(1500).then(() => {console.log("I execute");});
  }
  
  return <ChildComponent onRemove={removeFile} />
};

ReactDOM.render(<ParentComponent />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<body>
  <div id='root'></div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...