React：为组件添加三元运算符会破坏进度条

Question

我仍在学习 React，并尝试将 API 调用中的文本解析为 json 对象，同时在进度条中显示进度。

下面，Home.js 使用 useEffect hook 来

• 调用 getData 获取（大量）API 文本数据
• 调用 parseText 解析返回的文本
• 调用parseSeriesId解析返回结果
• 设置 seriesIdParts

最后，seriesIdParts 作为 props 传递给 Occupation.js。这工作正常，工作代码如下所示。

我的问题是我想让 parseText 完成后进度条消失。我发现了一个使用三元运算符的帖子，所以我尝试更改了这个：

<ProgressBar percentage={percentage}/> 

到这里：

{percentage >= 100 ? console.log("Done.") : <ProgressBar percentage={percentage}/> 

现在progressBar 消失了，但它不再显示为绿色。我可以在 ProgressBar.js 和 Filler.js 中很好地记录百分比值，因此 Filler 宽度元素似乎没有拾取百分比值增量：

<div className="filler" style={{ width: `${percentage}%`}}>

我该如何解决这个问题？

App.js

import React from 'react';
import './App.css';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}
export default App;

Home.js

import React from 'react';
import { useState, useEffect } from 'react';
import Occupation from './Occupation';
import ProgressBar from './ProgressBar';

const Home = () => {    
    
    const [seriesIdParts, setSeriesIdParts] = useState([]);
    const [percentage, setPercentage] = useState(0);

    async function getData(url) {
        const response = await fetch(url);
        if( response.status !== 200 ) {
            throw new Error('Problem calling ' + url);
        }
        return response.text();
    }

    function parseSeriesId(data) {
        let results = new Set()
        data.forEach(function(value) {     
            let areaCode = value.seriesId.substring(4, 11);
            let industry = value.seriesId.substring(11, 17);
            let occupation = value.seriesId.substring(17, 23);
            let dataType = value.seriesId.substring(23, value.seriesId.length);
            let seriesIdVal = value.value;
            if( dataType === '04') {
                let result = {areaCode: areaCode, industry: industry, occupation: occupation, dataType: dataType, seriesIdVal: seriesIdVal};
                results.add(result);
            }
        })
        return results;
    }
    
    useEffect(() => {
        getData('https://download.bls.gov/pub/time.series/oe/oe.data.0.Current')
        .then(data => {
            const parseText = function(data) {
                data = data.split('\n');
                let localNum = 1090;
                let results = new Set();
                let intervalAmount = 100 / localNum;
                
                for( let i=1; i<=localNum; i++ ) {
                    setPercentage((i * intervalAmount));

                    let line = data[i];
                    if( line !== "") {
                        line = line.split('\t');
                        let seriesIdValue = line[0].trim();
                        let valueValue = line[3].trim();
                        if (valueValue !== '-') {
                            results.add({'seriesId': seriesIdValue, 'value': valueValue});
                        }
                    }
                }
                return results;
            }
            return parseText(data, 100);
        })
        .then(data => {
            return parseSeriesId(data);
        })
        .then(data => {
            setSeriesIdParts(data);
        })
        .catch(err => console.log(err));
    }, [percentage]);

    return(
        <div className="homeComponent">
            <label id="parsetext" >
                Parsing Text...
                <ProgressBar percentage={percentage}/> 
            </label>
            {seriesIdParts && <Occupation seriesIdParts={seriesIdParts}/>}
        </div>
    );
}
export default Home;

ProgressBar.js

import React, { useState } from 'react';
import Filler from './Filler';

const ProgressBar = ({percentage}) => {
    // console.log('Pbar: ', percentage);           <== Displays fine!
   return (  
        <div className="progressbar">
            <Filler percentage={percentage}/>
        </div>
    );
}
export default ProgressBar;

Filler.js

import React from 'react';

const Filler = ({percentage}) => {
    return (  
        <div className="filler" style={{ width: `${percentage}%`}}>
           {console.log('filler: ' + percentage)}.  <== Displays fine!
        </div>
    );
}
export default Filler;

职业.js

import React from 'react';
import { useState, useEffect } from 'react';

const Occupation = ({seriesIdParts}) => {
    
    console.log('seriesIdParts in Occupation:', seriesIdParts.size)    <== Displays fine!

    //other code...
};
export default Occupation;

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.progressbar {
  margin: 4em auto;
  width: 80%;
  height: 2em;
  background-color: lightgray;
  border-radius: 30px;
}

.filler {
  height: inherit;
  width: 0px;
  background-color: green;
  border-radius: inherit;
}

#parsetext {
  text-align: 'center';
  margin: 4em 0 0;
}

更新：如果有更好的方法让进度条消失，我愿意接受建议！

Answer 1

如果您将filler 类的高度设置为喜欢20px 而不是inherit 只是为了尝试？

.filler {
  height: inherit;
  width: 0px;
  background-color: green;
  border-radius: inherit;
}

我试图只测试那个 div，但我无法通过“继承”看到它