React 组件未被渲染答案

【问题标题】：React Componenet not being renderedReact 组件未被渲染
【发布时间】：2023-02-23 09:41:57
【问题描述】：

我的组件最后呈现为空白 api 调用一切正常，我添加了一些 console.log() 用于调试，任何人都可以给我一个提示吗？

基本上，我想从具有此 json 结构的 api 中检索数据

[
    {
        "trackName": "Beira de Piscina (Remix)",
        "trackUri": "spotify:track:6a0kQTjyGmfwBF0tLVgEha",
        "artistImage": "https://i.scdn.co/image/ab67616d0000b27366127aa6c868a01e97f62d64"
    },
    {
        "trackName": "Beira de Piscina",
        "trackUri": "spotify:track:25XUxLporfgzl2rf2mtgmj",
        "artistImage": "https://i.scdn.co/image/ab67616d0000b2738e2cc04d7c1ed2beb3216ff2"
    }
]

我想在页面上呈现那些，它是一个示例代码，但我不明白为什么我得到一个空白页面:(

那是我的代码：

import {useState} from "react";

export default function SearchTracks() {

    const [formSuccess, setFormSuccess] = useState(false)
    const [trackList, setTracklist] = useState()

    const handleSubmit = async (event: any) => {
        event.preventDefault()

        const data = {
            trackName: event.target.trackName.value
        }

        const endpoint = `http://myEndPoint:8080/tracks?trackName=${data.trackName}`
        const options = {
            method: 'GET',
            headers: {
                'access-token': 'MyAccessToken'
            }
        }
        const response = await fetch(endpoint, options)

        const result = await response.json()
        setFormSuccess(true)

        setTracklist(result)
    };

    const renderTrack = (trackListResponse) : any => {
        const myMap = new Map(Object.entries(trackListResponse))
        return myMap.forEach((trackValue) => {
            return trackValue.map(track => {
                let value = buildTrackContainer(track)
                console.log(value)
                return value
            })
        })
    }

    const buildTrackContainer = (track) => {
       console.log("Building track: " + track.trackName)
       return <li key={track.trackUri}>
            <p>{track.trackName}</p>
            <p>{track.trackUri}</p>
            <img src={track.artistImage}/>
        </li>
    }

    return (
        <div>
            {formSuccess ?
                <ul>
                    { renderTrack({trackList}) }
                </ul>
                :
                <form onSubmit={handleSubmit}>
                    <label htmlFor="trackName">Track Name</label>
                    <input type="text" id="trackName" name="trackName" required/>
                    <button type="submit">Submit</button>
                </form>
            }
        </div>
    )
}

在控制台中，我可以看到我的反应元素在函数中返回

My Console Logs

Result Page

【问题讨论】：

标签： javascript next.js frontend

【解决方案1】：

问题出在您的renderTrack() 函数中。试试这个：

    const renderTrack = (trackListResponse) : any => {
        return trackListResponse.trackList.map(track =>
            buildTrackContainer(track)
        );
    };

问题是 forEach 实际上并没有返回任何东西。另一种方法是创建一个空数组，这会在 forEach 调用中将元素推送到空数组中，但这感觉可能比它的价值更麻烦。例如：

    const renderTrack = (trackListResponse) : any => {
        const myMap = new Map(Object.entries(trackListResponse));
        const renderElements = [];
        myMap.forEach(trackValue => {
            return trackValue.map(track => {
                let value = buildTrackContainer(track);
                renderElements.push(value);
            });
        });
        return renderElements;
    };

【讨论】：