為什么組件沒有在 react js 中渲染？

Question

所以我已經學會了反應，但我在練習時需要一些幫助。 這可能很長，但您的幫助將不勝感激。 以下代碼均無效，所以我只想找出我做錯了什么。 我設置了以下上下文，它是一個對象數組

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

export const Songlist = createContext()

const TheSongs = (props) => {
    const [songs, setSongs] = useState([
        {title: "deliverance", artist: "opeth", id: 0},
        {title: "civil war", artist: "guns n roses", id: 1},
        {title: "heaven and hell", artist: "black sabbath", id: 2},
        {title: "anesthetize", artist: "porcupine tree", id: 3}
    ])
    const songList = () =>{
        setSongs(songs.forEach(song =>{
            return(
                <div className="container" key={song.id}>
                    <h4>{song.title}</h4>
                    <h3>{song.artist}</h3>
                </div>
            )
        }))
    }
    return ( 
        <Songlist.Provider value={songs, songList}>
            {props.children}
        </Songlist.Provider>
     );
}

export default TheSongs;

然后我嘗試在這樣的組件中調用它

import React, {useContext} from 'react';
import {Songlist} from '../contexts/TheWorld'

const SongListUI = () => {

    const {songList} = useContext(Songlist)


    return ( 
        <div className="hi">
            {songList}
        </div>
     );
}

export default SongListUI;

沒有發生任何錯誤，但根本沒有渲染任何內容，名為“hi”的 div 沒有任何內容。

然后我只是將數組保留在上下文中並再次通過 use Context 在組件中調用它，但這次我嘗試了一些不同的東西，那就是

import React, {useContext} from 'react';
import {Songlist} from '../contexts/TheWorld'

const SongListUI = () => {

    const {songs} = useContext(Songlist)

    const songList = () =>{
      songs.forEach(song =>{
        return(
            <div className="container" key={song.id}>
                <h4>{song.title}</h4>
                <h3>{song.artist}</h3>
            </div>
        )
    })
}

    return ( 
        <div className="hi">
            {songList}
        </div>
     );
}

export default SongListUI;

我收到一個錯誤，提示函數不允許作為 react childs 並且仍然沒有在 div 中呈現任何內容，所以我再次嘗試了一些不同的東西，我在jsx應用了forEach循環而不是函數的名稱，但它仍然沒有工作，並且在“hi”div 中沒有呈現任何內容。 所以我useState了整個上下文並在組件本身內部使用了useState鈎子

import React, {useState} from 'react';

const SongListUI = () => {

    const [songs, setSongs] = useState([
        {title: "deliverance", artist: "opeth", id: 0},
        {title: "civil war", artist: "guns n roses", id: 1},
        {title: "heaven and hell", artist: "black sabbath", id: 2},
        {title: "anesthetize", artist: "porcupine tree", id: 3}
    ])

    const songlist = () =>{
        setSongs(songs.forEach(song =>{
            return(
                <div className="container" key={song.id}>
                    <h4>{song.title}</h4>
                    <h3>{song.artist}</h3>
                </div>
            )
        }))
    }


    return ( 
        <div className="hi">
            {songlist}
        </div>
     );
}

export default SongListUI;

由於再次反應子錯誤而不起作用，所以

import React, {useState} from 'react';

const SongListUI = () => {

    const [songs, setSongs] = useState([
        {title: "deliverance", artist: "opeth", id: 0},
        {title: "civil war", artist: "guns n roses", id: 1},
        {title: "heaven and hell", artist: "black sabbath", id: 2},
        {title: "anesthetize", artist: "porcupine tree", id: 3}
    ])


    return ( 
        <div className="hi">
            {
                songs.forEach(song =>{
                    return(
                        <div key={song.id}>
                            <h4>{song.title}</h4>
                            <h3>{song.artist}</h3>
                        </div>
                    )
                })
            }
        </div>
     );
}

export default SongListUI;

仍然沒有任何效果，所以我只想知道我做錯了什么......

Answer 1

forEach的返回值是undefined 。 你可以在你的歌曲中嘗試使用.map的最后一個例子嗎？

IE

songs.map((song) => <div key={song.id}><h4>{song.title}</h4><h3>{song.artist}</h3></div>)