<p>我正在尝试调用200个远程资源以在我的表格中显示，同时显示一个进度条来显示剩余的调用次数。</p> <p>使用这个示例来演示如何使用<code>Fetch()</code>和<code>Promise.all()</code>来调用<code>setState()</code>来更新新数据。</p> <p>我的问题在于每个promise的<code>.then()</code>，它计算一些逻辑，然后调用<code>setState()</code>来更新数据。</p> <p>我的进度条使用<code>Object.keys(data).length</code>来显示进度。</p> <p>在<code>Promise.all()</code>触发“完成”状态后，移除进度条，promise本身仍然在调用它们的<code>then()</code>，这导致进度条在显示完所有已解决的promise之前就被隐藏了。</p> <p>如何正确处理这个问题？</p> <hr /> <p>演示，使用<code>setTimeout()</code>来模拟昂贵的逻辑。</p> <p>问题在于<code>Promise.all.then: 20</code>应该在<code>Render 20</code>之后。</p> <pre class="brush:none;toolbar:false;">Render 0 ... Render 12 Promise.all.then: 20 # 我需要这个在每个Render之后记录 Render 13 ... Render 19 Render 20 </pre> <p>为了使演示显示出问题，进度条在完全填满之前就被移除（变成红色）。</p> <p><br /></p> <pre class="brush:js;toolbar:false;">const { useState } = React; const Example = () =&gt; { const [done, setDone] = useState(false); const [data, setData] = useState({}); const demoData = Array.from(Array(20).keys()); const demoResolver = (x) =&gt; new Promise(res =&gt; setTimeout(() =&gt; res(x), Math.random() * 1250)) const loadData = () =&gt; { const promises = demoData.map(c =&gt; demoResolver(c)); promises.forEach(promise =&gt; { promise .then(r =&gt; { setTimeout(() =&gt; { setData(p =&gt; ({ ...p, [r]: r })); }, 500); }) }); Promise.all(promises) .then(r =&gt; { console.log('Promise.all.then: ', r.length) setDone(true); }) } console.log('Render', Object.keys(data).length); const progressBarIsShownDebugColor = (done) ? 'is-danger' : 'is-info'; return ( &lt;section className='section'&gt; &lt;h1 className='title is-3'&gt;{'Example'}&lt;/h1&gt; &lt;progress max={demoData.length} value={Object.keys(data).length} className={'progress my-3 ' + progressBarIsShownDebugColor} /&gt; &lt;button onClick={loadData}&gt;Start&lt;/button&gt; &lt;/section&gt; ) } ReactDOM.render(&lt;Example /&gt;, document.getElementById("react"));</pre> <pre class="brush:css;toolbar:false;">.as-console-wrapper { max-height: 50px !important; }</pre> <pre class="brush:html;toolbar:false;">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"&gt; &lt;div id="react"&gt;&lt;/div&gt;</pre> <p><br /></p>

const [data, setData] = useState({});
const done = Object.keys(data).length === 20; // 在实际代码中为200

const { useState } = React;

const Example = () => {

    const [data, setData] = useState({});
    const done = Object.keys(data).length === 20; // 在实际代码中为200
      
    const demoData = Array.from(Array(20).keys());
    const demoResolver = (x) => new Promise(res => setTimeout(() => res(x), Math.random() * 1250))
    
    const loadData = () => {
        
        const promises = demoData.map(c => demoResolver(c));
          
        promises.forEach(promise => {
            promise
                .then(r => {
                    setTimeout(() => {
                        setData(p => ({ ...p, [r]: r }));
                    }, 500);
                })
        });
    }
    
    console.log('Render', Object.keys(data).length);
  
    const progressBarIsShownDebugColor = (done)
      ? 'is-danger'
      : 'is-info';
    
    return (
        <section className='section'>
            <h1 className='title is-3'>{'Example'}</h1>
            <progress 
                max={demoData.length}
                value={Object.keys(data).length} 
                className={'progress my-3 ' + progressBarIsShownDebugColor}
            />
            <button onClick={loadData}>Start</button>
        </section>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

.as-console-wrapper { max-height: 50px !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<div id="react"></div>