javascript - 我可以在功能组件中使用什么来与 componentDidMount 具有相同的行为？

Question

在使用类组件之前，我的 UI 工作正常。现在我将它重构为一个功能组件。
我必须根据从 API 处理程序接收到的数据加载我的 UI。我的用户界面将反射(reflect)房间内的摄像头状态。每次从房间打开或关闭相机时，我都应该从 API apiToGetCameraState 收到新状态.
我想要 console.log存在于 registerVideoStateUpdateHandlerWrapper 内第一次在 UI 加载时打印，也可以在房间中每次更改视频状态时加载。但是，在第一次加载 UI 时它不起作用。
这是我的组件的样子:

const Home: React.FunctionComponent<{}> = React.memo(() => {
  const [video, setToggleVideo] = React.useState(true);

  const registerVideoStateUpdateHandlerWrapper = React.useCallback(() => {
    apiToGetCameraState(
      (videoState: boolean) => {
        // this log does not show up when the UI is loaded for the first time
        console.log(
          `Video value before updating the state: ${video} and new state is: ${videoState} `
        );
        setToggleVideo(videoState);
      }
    );
  }, [video]);

  React.useEffect(() => {
    //this is getting called when the app loads
    alert(`Inside use effect for Home component`);
    registerVideoStateUpdateHandlerWrapper ();
  }, [registerVideoStateUpdateHandlerWrapper ]);

  return (
      <Grid>
        <Camera
          isVideoOn={video}
        />
      </Grid>
  );
});

当我的代码在类组件中时，这工作正常。这就是类组件的样子。

class Home extends Component {
    
    registerVideoStateUpdateHandlerWrapper = () => {
        apiToGetCameraState((videoState) => {
            console.log(`ToggleVideo value before updating the state: ${this.state.toggleCamera} and new state is: ${videoState}`);
            this.setStateWrapper(videoState.toString());
        })
    }
    setStateWrapper = (toggleCameraUpdated) => {
        console.log("Inside setStateWrapper with toggleCameraUpdated:" + toggleCameraUpdated);
        this.setState({
            toggleCamera: (toggleCameraUpdated === "true" ) ? "on" : "off",
        });
    }
   
    constructor(props) {
        super(props);
        this.state = {
            toggleCamera: false,
        };
    }
    componentDidMount() {
        console.log(`Inside componentDidMount with toggleCamera: ${this.state.toggleCamera}`)
        this.registerVideoStateUpdateHandlerWrapper ();   
    }
    render() {
      return (
        <div>
          <Grid>
            <Camera isVideoOn={this.state.toggleCamera} />
          </Grid>
     );
  }
}

我都尝试了什么？

我尝试删除 useCallback在 registerVideoStateUpdateHandlerWrapper函数以及来自 React.useEffect 的依赖数组和 registerVideoStateUpdateHandlerWrapper .它的行为相同

我尝试更新 React.useEffect拥有 registerVideoStateUpdateHandlerWrapper 的代码在它但仍然没有成功。

Answer 1

搬家 registerVideoStateUpdateHandlerWrapper()内useEffect()像这样回调。如果你想在状态改变时记录之前的状态，你应该使用 functional update避免 capturing the previous state through the closure :

const Home = () => {
  const [video, setVideo] = useState(false);

  useEffect(() => {
    console.log('Inside useEffect (componentDidMount)');

    const registerVideoStateUpdateHandlerWrapper = () => {
      apiToGetCameraState((videoState) => {
        setVideo((prevVideo) => {
          console.log(`Video value before updating the state: ${prevVideo} and new state is: ${videoState}`);
          return videoState;
        });
      });
    };

    registerVideoStateUpdateHandlerWrapper();
  }, []);

  return (
    <Grid>
      <Camera isVideoOn={video} />
    </Grid>
  );
};

当您实际上不再需要记录之前的状态时，您应该简化 registerVideoStateUpdateHandlerWrapper()到:

const registerVideoStateUpdateHandlerWrapper = () => { 
  apiToGetCameraState((videoState) => {
    setVideo(videoState);
  });
};