根据控制台的说法，更新未安装的组件

Question

我从数据库中获取一些数据，这是对象(歌曲(的数组。我想一次展示5首歌曲，因为有800多首歌曲，如果我一次尝试一次加载程序，程序会减慢很多。

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

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

我已经尝试在使用示例的使用效率内部设置一个台。log，但是Eslint(我认为它是Eslint(在功能末尾不断修改数组，并添加一些我不希望内部的代码。p>我不能做showongs.map，但是我可以做歌曲。

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(() => {
    let newList = [];
    for (let i = offset.quantity; i < offset.quantity + 5; i++) {
      newList.push(songs[i]);
    }
    setShow(newList);
  }, [offset.quantity, setSongs, songs]);

Answer 1

当您具有在组件被卸载后试图更新状态的异步功能时，就会发生这种情况。当您的异步处理程序是例如，代码执行继续执行。等待网络请求的响应。在那个时候，已经导致了您的组件卸载。

检查渲染MySongsForm的组件。在内部的异步处理程序试图更新状态之前，有些事情使其卸载。

Answer 2

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

这解决了。