prevState不一致

时间:2018-07-23 14:37:01

标签: javascript reactjs redux

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

enter image description here

构造函数

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
  };

1 个答案:

答案 0 :(得分: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));