reactjs - 根据控制台更新未安装的组件

问题描述

我从数据库中获取一些数据，该数据库是一组对象（歌曲）。我想一次显示 5 首歌曲，因为有 800 多首歌曲，如果我尝试一次全部加载，程序会变慢很多。

如果我直接加载歌曲，我的反应部分工作正常，但我正在尝试创建另一个状态，一次只存储 5 个对象，并显示这 5 个，而我有另一个称为“歌曲”的状态，它将设置它的状态一开始，存储800多首歌曲。当我尝试将此 5 存储在另一种状态时，程序崩溃。

我感谢任何帮助理解我的错误。

我尝试在修改 showSongs 的 useEffect 中设置一个 console.log，但 esLint（我认为它是 esLint）一直在修改函数末尾的数组，在其中添加一些我不想要的代码。

我不能做showSongs.map，但我可以做songs.map（但是歌曲会有800多首歌曲，所以我想显示showSongs）。


function MySongsForm() {
  const [offset, setOffset] = useState({ quantity: 0 });
  const [showSongs, setShow] = useState([]);
  const [songs, setSongs] = useState([]);
  const [selectedSong, setSelected] = useState({ song: "" });
  const [recommendations, setRecommendations] = useState([]);

  useEffect(() => {
    async function getData() {
      const res = await requestMySongs();
      setSongs(res);
    }
    getData();
  }, [setSongs]);

  async function submitSong() {
    const recs = await recommendationRequest(selectedSong.song);
    setRecommendations(recs.tracks);
  }

  function UpdateSelected(event) {
    event.persist();
    console.log(event);
    console.log(event.target.value);
    setSelected({ song: event.target.value });
  }

  useEffect(() => {
    let newList = [];
    for (let i = offset.quantity; i < offset.quantity + 5; i++) {
      newList.push(songs[i]);
    }
    setShow(newList);
  }, [offset.quantity, setSongs, songs]);

  return (
    <div>
      <FormControl component="fieldset">
        <RadioGroup>
          {showSongs.map((song, index) => {
            return (
              <FormControlLabel
                control={<Radio />}
                key={index}
                value={song.song_spotify_id}
                name="songInput"
                onClick={e => UpdateSelected(e)}
                label={song.name}
              />
            );
          })}
        </RadioGroup>
        <Button onClick={() => submitSong()}>Select Song</Button>
      </FormControl>
      <DisplaySongs songs={recommendations} />
    </div>


  );
}

我在浏览器中遇到的错误是：

TypeError：无法读取未定义的属性“song_spotify_id”

我在控制台中同时遇到的错误是：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

编辑：

我已经检查过，但我不知道我在寻找什么。如果我删除以下功能，它可以工作：

  useEffect(() => {
    let newList = [];
    for (let i = offset.quantity; i < offset.quantity + 5; i++) {
      newList.push(songs[i]);
    }
    setShow(newList);
  }, [offset.quantity, setSongs, songs]);

标签： reactjsreact-hooksuse-effect

useEffect(() => { function setDisplay() { let newList = []; for (let i = offset.quantity; i < offset.quantity + 5; i++) { newList.push(songs[i]); } console.log(newList); setShow(newList); } if (songs.length !== 0) { setDisplay(); } }, [offset, songs]);

reactjs - 根据控制台更新未安装的组件

问题描述

解决方案

推荐阅读