如何将 React Hook 用于 componentWillReceiveProps

Question

我正在尝试更改基于类的组件以响应挂钩。您可以在其中比较之前和即将到来的道具，并找出差异来改变状态。

class_component

componentWillReceiveProps(props) {
    if (
      props.artistState.nextVideos.length >
      this.props.artistState.nextVideos.length
    ) {
      const diff =
        props.artistState.nextVideos.length -
        this.props.artistState.nextVideos.length
      this.setState(state => {
        return { loadingItems: state.loadingItems - diff }
      })
    }
}

挂钩

function usePrevious(value) {
  // The ref object is a generic container whose current property is mutable ...
  // ... and can hold any value, similar to an instance property on a class
  const ref = useRef();

  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes

  // Return previous value (happens before update in useEffect above)
  return ref.current;
}


const prevVideosLen = usePrevious(artistState.nextVideos.length);

useEffect(() => {
  if (prevVideosLen) {
    console.log('artist:: Card', {
      length1: artistState.nextVideos.length,
      length2: prevVideosLen,
    });
    if (artistState.nextVideos.length > prevVideosLen) {
      const diff = artistState.nextVideos.length - prevVideosLen;
      console.log('artist:: Card', { diff });
      setLoadingItems((prev) => prev - diff);
    }
  }
}, [artistState, prevVideosLen]);

我尝试使用 with previous 但我得到的 prev 状态与当前状态相同？以及如何在 hooks 上实现与 componentWillReceiveProps 相同的功能。

Answer 1

可以像这样使用 React Hook for componentWillReceiveProps

useEffect( () => {
        console.log('posts updated');
},
[props.posts])