React.JS 组件不会呈现我的无序列表

问：

以下代码表示我当前正在呈现的内容。虽然一切都完美无缺，但有一个 React 组件需要注意。其目的是从我的自定义 API 中检索和显示无序列表。<GetCarInfo/>

return (
        <div>
            <main>
            <MainTitle>data</MainTitle>
            
            <ul>
            <EntityTitle /*onSelect will also be passed into EntityTitle*/onSelect={() => handleClick('General Stuff')}/* This allows us to pass data into the parameters */>
                General    
            </EntityTitle>

            <EntityTitle /*onSelect will also be passed into EntityTitle*/onSelect={() => handleClick('Battery')}/* This allows us to pass data into the parameters */>
                Battery    
            </EntityTitle>
            </ul>

            <GetCarInfo/>

            <p>{selectedTopic}</p>
            <div id="car-content">
                <h3></h3>
                <p></p>
                <pre>
                    <code>

                    </code>
                </pre>
            </div>
            </main>
        </div>


    )

这是我的 GetCarInfo 组件：

function GetCarInfo(){
    const [info, setInfo] = useState([])
    var arrTitle = [];
    var obj;
    useEffect(() => {
        async function fetchInfo(){
            const response = await  fetch('http://localhost:3000/api/cars');
            var resData = await response.json();
            obj = JSON.parse(resData);
            setInfo(obj);
            for(var key in obj){
                arrTitle.push(key);
            }
           // console.log("This is resData", info);
        }
        fetchInfo();
    }, [])
    
    console.log(arrTitle);
    
    return (
        <>
            <ul>
                {arrTitle.map((title) => (
                    <li key={title}>{title}</li>
                ))}
            </ul>
        </>
    )
}

因此，我获取到某个 API，然后在该 API 中将所有键推送到一个名为 arrTitle 的数组中。它确实将数据推送到 arrTitle 中。然后，由于认为它已将所有信息推送到 arrTitle 中，我决定将此组件返回到我的其他组件中，以便它可以渲染数组。

我将在下面发布 API，但是，出于隐私原因，我将不得不阻止某些信息。因此，arrTitle 应该是带下划线的字符串。

我怀疑我的组件是异步运行的，特别是考虑到它本质上是异步的。为了进行调查，我使用了浏览器控制台，并注意到返回组件在填充数组之前执行，导致页面上没有显示任何数据。fetch

在我看来很奇怪，即使我在函数外部声明了数组，但在函数内访问它时它仍然是空的。关于为什么会发生这种情况的任何见解？GetCarItem

我通过使用两次成功将标题输出到控制台取得了进展，这解决了大多数错误和警告。下面是改进组件的更新代码块，该组件允许控制台日志正常运行。尽管有这些积极的发展，但我还是遇到了一个问题，即即使在尝试了这样的方法之后，组件也无法呈现。关于如何解决此渲染问题的任何见解？setInfo(arrTitle)JSON.stringify

function GetCarInfo(){
    const [info, setInfo] = useState([])
    var arrTitle = [];
    var obj;
    useEffect(() => {
        async function fetchInfo(){
            const response = await  fetch('http://localhost:3000/api/cars');
            var resData = await response.json();
            obj = JSON.parse(resData);
            for(var key in obj){
                arrTitle.push(key);
            }
            setInfo(arrTitle); //This is the new thing I added
           // console.log("This is resData", info);
        }
        fetchInfo();
    }, [])

    console.log(info);
    return (
        <>
            <ul>
                {arrTitle.map((title) => (
                    <li key={title}>{title}</li>
                ))}
            </ul>
        </>
    )
}

[注意：我观察到另一个组件中的控制台日志记录反复发生两次。如果有人对这种行为背后的原因有深入的了解，我将不胜感激，因为我很想知道根本原因。

我已经在 vanilla javascrip 上完成了这个。这是我希望数据如何提示出来的图像。

但是，它是这样提示的。现在不要介意随机按钮，因为我正在测试一些东西。

我通过采用特定方法成功解决了这个问题。对于像我这样相对较新并且在将数据提示到网页上时面临挑战的人来说，利用 2D 数组的当前状态（名为 ）被证明是解决方案 - 谢天谢地！info

尽管取得了成功，但我仍然对阻止数据显示的最初问题感到好奇。对根本原因的任何见解将不胜感激。下面的代码是更新的代码。

   const [info, setInfo] = useState([])
    var arrTitle = [];
    var obj;
    useEffect(() => {
        async function fetchInfo(){
            const response = await  fetch('http://localhost:3000/api/cars');
            var resData = await response.json();
            obj = JSON.parse(resData);
            for(var key in obj){
                arrTitle.push(key);     //ERROR: try stringfying the key before inserting it    
            }
            setInfo(arrTitle);
           // console.log("This is resData", info);
        }
        fetchInfo();
    }, [])

    console.log(info);
    return (
        <>
            <ul>
                {info.map((title) => (
                    <li key={title}>{title}</li>
                ))}
            </ul>
        </>
    )
}