javascript - prevState不一致

我试图将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);
        });
      }
    }
  }

减速器摘要

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

最佳答案

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


if (this.state !== prevState)不是将旧状态与新状态进行比较的有效方法。他们只是将引用作为变量进行比较（这将始终是不同的），而不是其内容。为了正确执行此操作，您需要一个一个地比较每个状态变量。为此，请使用诸如lodash的_isEqual之类的库，或者实施您自己的解决方案（如果状态很小，则是个好主意）。
由于console.log(this.state.thumbnail);是异步的，因此在setState()之后立即执行setState()实际上会打印先前的值。而是将您的日志放入setState()的回调参数内：

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

关于javascript - prevState不一致，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51481413/