反应地图不是一个功能

Question

我目前正在制作一个包含歌曲的演示文稿。我在这段代码中收到 listedSongs.map is not a function 错误。我正在使用 GetSongsRequest 中的地图功能将歌曲添加到 div。这工作正常。

失败的是 SongsInList 中的 map 函数，我不太清楚为什么，因为 map 函数几乎相同，除了我必须提升 listedSongs 的状态，以便两个函数都可以访问它。

import React, {useState, useEffect} from "react"
import { useAuth0 } from "@auth0/auth0-react";

function GetSongsRequest(listedSongs, addListedSongs) {
    const { user } = useAuth0();
    const [songs, setSongs] = useState([])

    useEffect(() => {
        if (user) {
            const requestOptions = {
                method: 'GET'
            };
            let url = '#' + user.sub
            fetch(url, requestOptions)
            .then(response => {
                return response.json();
            }).then(jsonResponse => {
                setSongs(jsonResponse)
                localStorage.setItem('songsStorage', JSON.stringify(jsonResponse))
            }).catch (error => {
                console.log(error);
            }) 
        }
    }, [user])
    return (
        <>
        <ul>
            {songs.map((el) => (
                <li key={el} className="tailwindCssStuff"
                onClick={ () => addListedSongs(listedSongs.concat(el)) }>
                {el[0]}</li>
            ))}
        </ul>
        </>
    )
}

function SongsInList(listedSongs) {
    return (
            <ul>
                {listedSongs.map((el) => (
                <li key={el} className="tailwindCssStuff">
                {el[0]}</li>
                ))}
            </ul>
    )
}

export default function Main() {
    const [listedSongs, addListedSongs] = useState([])
    return (
    <div>
        <div id="userContent" className="tailwindCssStuff">
            <h1 className="tailwindCssStuff">Songs</h1>
            <div id = "vertical-content">
                <GetSongsRequest listedSongs={listedSongs} addListedSongs={addListedSongs} />
            </div>
        </div>
        <div id="liveList" className="tailwindCssStuff">
            <h1 className="tailwindCssStuff">List</h1>
            <div id = "vertical-list">
                <SongsInList listedSongs={listedSongs} />
            </div>
        </div>
    </div>
    )
}

示例数据：

[["Song","LINE 1\nLINE 2\nLINE 3\nLINE 4"],["Song 2","LINE 1\nLINE 2\nLINE 3\nLINE 4"],["Song 3","LINE 1\nLINE 2\nLINE 3\nLINE 4"],["Song 4","LINE 1\nLINE 2\nLINE 3\nLINE 4"],["Song 5","LINE 1\nLINE 2\nLINE 3\nLINE 4"],["SONG 6","SEDTRFGYUHIJ\nRXDGYUIHJO\nRDFTGYUHIJOKP\nJRCFGVHBJN"]]

这是我将从 GET 请求中获得的示例

谢谢！

Answer 1

假设在状态更新时获取的数据是正确的，那么您在 props 处理方面存在一些问题。

GetSongsRequest 需要正确访问道具。通过从 props 对象解构来解决这个问题。

import React, { useState, useEffect } from "react";
import { useAuth0 } from "@auth0/auth0-react";

function GetSongsRequest({ listedSongs, addListedSongs }) {
  const { user } = useAuth0();
  const [songs, setSongs] = useState([])

  useEffect(() => {
    if (user) {
      const requestOptions = {
        method: 'GET'
      };
      let url = '#' + user.sub
      fetch(url, requestOptions)
        .then(response => {
          return response.json();
        }).then(jsonResponse => {
          setSongs(jsonResponse)
          localStorage.setItem('songsStorage', JSON.stringify(jsonResponse))
        }).catch (error => {
          console.log(error);
        }) 
    }
  }, [user])
  return (
    <ul>
      {songs.map((el) => (
        <li key={el} className="tailwindCssStuff"
          onClick={ () => addListedSongs(listedSongs.concat(el)) }>
          {el[0]}</li>
      ))}
    </ul>
  )
}

类似地，SongsInList 需要解构 listedSongs 道具，这是您要映射的数组。

function SongsInList({ listedSongs }) {
  return (
    <ul>
      {listedSongs.map((el) => (
        <li key={el} className="tailwindCssStuff">
          {el[0]}
        </li>
      ))}
    </ul>
  )
}

主菜还行

export default function Main() {
  const [listedSongs, addListedSongs] = useState([])
  return (
    <div>
      <div id="userContent" className="tailwindCssStuff">
        <h1 className="tailwindCssStuff">Songs</h1>
        <div id = "vertical-content">
          <GetSongsRequest listedSongs={listedSongs} addListedSongs={addListedSongs} />
        </div>
      </div>
      <div id="liveList" className="tailwindCssStuff">
        <h1 className="tailwindCssStuff">List</h1>
        <div id = "vertical-list">
          <SongsInList listedSongs={listedSongs} />
        </div>
      </div>
    </div>
  )
}

Answer 2

这里的问题是您阅读 props GetSongsRequest 和 SongsInList 组件的方式。

功能组件确实将 props 作为第一个参数 (check react docs)

您可以使用：

function SongsInList(props) {
    return <ul>
        { props.listedSongs.map( ... ) }
    </ul>
}

或者在函数参数中进行对象破坏：

function SongsInList({ listedSongs }) {
    return ...
}

function GetSongsRequest({ listedSongs, addListedSongs }) {
    return ...
}

反应地图不是一个功能

React map not a function

reactjs

react-dom

react-hooks