Question

需要延迟api更新。因为当api的结果呈现时，某些组件会稍有延迟，有时甚至无法打印出来。

尝试了输入用户的延迟，但这只是用于输入，因此请尝试其他方法来延迟api，但是没有运气

componentDidUpdate(prevProps, prevState) {
if (prevState.userInput !== this.state.userInput || 
      prevState.page !== this.state.page) {
        if (prevState.userInput !== this.state.userInput)
          this.setState({page: 1});
        if (this.state.userInput === '' && 
        (prevState.userInput !== this.state.userInput)) {
          fetch(API_POPULAR)
          .then(response => response.json())
          .then(json => {
            this.setState({
              selection: 'popular?',
              items: json.results, 
              isLoading: false,
              page: 1,
              max_pages: json.total_pages
             });
          });
}

Answer 1

如果您只想在每个 componentDidUpdate调用之后延迟api调用，只需将api包装到setTimeout的回调中即可：

<p>

请小心，因为每个调用componentDidUpdate将导致对api的异步调用延迟1秒，这可能会导致异常行为。

如果要允许用户与UI交互并仅在给定的时间后获取内容而不使用新的componentDidUpdate，则需要像这样使用clearTimeout：

    componentDidUpdate(prevProps, prevState) {
        const delay = 1000; // in ms
        if (
            prevState.userInput !== this.state.userInput || 
            prevState.page !== this.state.page
        ) {
            if (prevState.userInput !== this.state.userInput)
                this.setState({page: 1});
                if (
                    this.state.userInput === '' && 
                    (prevState.userInput !== this.state.userInput)
                ) {
                    setTimeout(
                        () =>
                            fetch(API_POPULAR)
                                .then(response => response.json())
                                .then(json => {
                                    this.setState({
                                        selection: 'popular?',
                                        items: json.results, 
                                        isLoading: false,
                                        page: 1,
                                        max_pages: json.total_pages
                                    });
                                 }),
                         delay
                    );
                }
            }
        }
    }

如果这仍然不是您要查找的内容，请尝试像上面建议的那样查看debounce和throttle。

Answer 2

您可以做的是（不使用debounce，这可能是这些情况下的最佳选择，但是在componentDidUpdate上使用它不是一个好主意）（在这种情况下）在setTimeout中，这样您就可以等待通话的时间，

componentDidUpdate(prevProps, prevState) {
if (prevState.userInput !== this.state.userInput || 
      prevState.page !== this.state.page) {
        if (prevState.userInput !== this.state.userInput)
          this.setState({page: 1});
        if (this.state.userInput === '' && 
        (prevState.userInput !== this.state.userInput)) {
          setTimeout(() => {
            fetch(API_POPULAR)
            .then(response => response.json())
            .then(json => {
              this.setState({
                selection: 'popular?',
                items: json.results, 
                isLoading: false,
                page: 1,
                max_pages: json.total_pages
              });
           });
          }, TIME_TO_WAIT);
}

在componentDidUpdate内部延迟Api调用

2 个答案: