reactjs - react 钩子(Hook) : how to watch changes in a JS class object?

Question

我对 React 很陌生，我并不总是理解什么时候必须使用钩子(Hook)，什么时候不需要它们。
我的理解是您可以通过使用获取/设置状态

const [myState, setMyState] = React.useState(myStateValue);

所以。我的组件基于 url prop 运行一些函数:

const playlist = new PlaylistObj();

React.useEffect(() => {
  playlist.loadUrl(props.url).then(function(){
    console.log("LOADED!");
  })
}, [props.url]);

在我的 PlaylistObj 类中，我有一个异步函数 loadUrl(url) 那

将播放列表的 apiLoading 属性设置为 true

获取内容

将播放列表的 apiLoading 属性设置为 false

现在，我想在我的 React 组件中使用该值，以便我可以设置它的类(我正在使用 classnames ):

  <div
  className={classNames({
    'api-loading': playlist.apiLoading
  })}
  >

但它不起作用；类(class)没有更新，即使我确实得到了“LOADED!”控制台中的消息。
似乎播放列表对象没有被 React“监视”。也许我应该在这里使用 react 状态，但是如何？
我测试过

const [playlist, setPlaylist] = React.useState(new PlaylistObj());
React.useEffect(() => {
  //refresh playlist if its URL is updated
  playlist.loadUrl(props.playlistUrl).then(function(){
    console.log("LOADED!");
  })
}, [props.playlistUrl]);

而这个，但对我来说似乎越来越不合逻辑，而且，好吧，行不通。

const [playlist, setPlaylist] = React.useState(new PlaylistObj());
React.useEffect(() => {
  playlist.loadUrl(props.playlistUrl).then(function(){
    console.log("LOADED!");
    setPlaylist(playlist); //added this
  })
}, [props.playlistUrl]);

我只希望我的组件与播放列表对象保持同步。我该如何处理？
我觉得我错过了一些东西。
非常感谢!

Answer 1

我认为你很接近，但基本上这个问题是你实际上没有更新状态引用来触发另一个具有正确加载值的重新渲染。

const [playlist, setPlaylist] = React.useState(new PlaylistObj());

React.useEffect(() => {
  playlist.loadUrl(props.playlistUrl).then(function(){
    setPlaylist(playlist); // <-- this playlist reference doesn't change
  })
}, [props.playlistUrl]);

我觉得你应该介绍第二个 isLoading状态到您的组件。当 URL 更新时触发效果，首先将加载设置为 true，当 Promise 解析时将其更新回 false。

const [playlist] = React.useState(new PlaylistObj());
const [isloading, setIsLoading] = React.useState(false);

React.useEffect(() => {
  setIsLoading(true);
  playlist.loadUrl(props.playlistUrl).then(function(){
    console.log("LOADED!");
    setIsLoading(false);
  });
}, [props.playlistUrl]);

使用 isLoading渲染中的状态

<div
  className={classNames({
    'api-loading': isLoading,
  })}
>

我还建议使用 finally Promise 链的块以在 Promise 被拒绝的情况下结束加载，您的 UI 不会卡在加载“状态”中。

React.useEffect(() => {
  setIsLoading(true);
  playlist.loadUrl(props.playlistUrl)
    .then(function() {
      console.log("LOADED!");
    })
    .finally(() => setIsLoading(false));
}, [props.playlistUrl]);