0

我从数据库中获取一些数据，该数据库是一组对象（歌曲）。我想一次显示 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]);
4

2 回答 2

0 
  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]);

这解决了它。

于 2019-07-04T13:42:07.120 回答
0

当您在卸载组件后有一个异步函数尝试更新您的状态时，就会发生这种情况。当您的异步处理程序正在等待网络请求的响应时，代码继续执行。在那个时候，某些事情已经导致您的组件卸载。

检查渲染您的MySongsForm. 在其内部的异步处理程序尝试更新状态之前，某些东西会使其卸载。

于 2019-07-04T13:14:52.867 回答