javascript - 上一篇状态不一致

Question

我正在尝试将thumbnail URL 添加到我的缩略图状态数组中。但为了防止无限循环，我试图将先前的状态与当前的状态进行比较。但是，当这样做时，先前的状态会继续引用状态对象吗？我需要的数组是显示 Explore 第 35 行的数组。理想情况下，我认为这将是当前状态，因为这就是它正在打印的内容。

构造函数

constructor(props) {
    super(props);
    this.props.getVideos();
    this.state = {
      thumbnail: []
    };
  }

ComponentDidUpdate

componentDidUpdate(prevState) {
    console.log("Current State->" + this.state.thumbnail);
    console.log("Previous State->" + JSON.stringify(prevState.videos));
    // console.log("Previous State->" + prevState.videos.video);
    if (this.props.videos == null) {
      console.log("It's null");
    } else {
      if (this.state !== prevState) {
        const videos = this.props.videos.video.map(video => {
          this.setState(prevState => ({
            thumbnail: prevState.thumbnail.concat(video.thumbnail)
          }));
          console.log(this.state.thumbnail);
        });
      }
    }
  }

reducer 片段

case GET_VIDEOS:
  return {
    ...state,
    videos: action.payload,
    loading: false
  };

Answer 1

我可以立即看到的几个问题:

1. if (this.state !== prevState) 不是比较旧状态与新状态的有效方法。他们只是将它们的引用作为变量进行比较(它们总是不同的) - 而不是它们的内容。为了正确地做到这一点，您需要一一比较每个状态变量。要么使用一个库，例如 lodash 的 _isEqual，要么实现您自己的解决方案(如果您的状态很小，这是个好主意)。

2. 在 setState() 之后执行 console.log(this.state.thumbnail); 实际上会打印之前的值，因为 setState( ) 是异步的。相反，请将日志放入 setState() 的回调参数中:

   this.setState(prevState => ({
     thumbnail: prevState.thumbnail.concat(video.thumbnail)
   }), () => console.log(this.state.thumbnail));