prevState不一致

Question

我正在尝试将thumbnail URL添加到缩略图状态数组中。但是为了防止无限循环，我正在尝试将当前状态与以前的状态进行比较。但是，这样做时，先前的状态会继续引用状态对象吗？我需要的数组是显示“探索”行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);
        });
      }
    }
  }

Reducers代码段

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

Answer 1

我马上就能看到的几个问题：

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

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

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