为什么没有在react中呈现组件？

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没有包含任何内容。

然后，我将数组保留在上下文中，并再次通过使用上下文在组件中调用它，但这次我尝试了一些不同的方法，即

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，而且div中仍然没有呈现任何东西，所以我再次尝试了一些不同的东西，我在jsx中应用了jsx循环，而不是函数的名称，但是它仍然不工作，在"hi“div中没有呈现任何东西。因此，我去掉了整个上下文，并在组件本身中使用了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;

由于react子错误再次发生，所以无法工作，所以

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来尝试你的最后一个例子吗？

即

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