如何在React钩子上使用`setState`回调

React钩子介绍了useState用于设置组件状态的方法。但是我如何使用钩子来代替如下代码的回调：

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

我想在状态更新后做一些事情。

我知道我可以useEffect用来做其他事情，但是我必须检查状态以前的值，这需要一个位代码。我正在寻找可以与useState钩子一起使用的简单解决方案。

您需要使用useEffect钩子来实现。

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

如果要更新以前的状态，则可以在钩子中执行以下操作：

const [count, setCount] = useState(0);


setCount(previousCount => previousCount + 1);

useEffect，仅在状态更新时触发：

const [state, setState] = useState({ name: "Michael" })
const isFirstRender = useRef(true)

useEffect(() => {
  if (!isFirstRender.current) {
    console.log(state) // do something after state has updated
  }
}, [state])

useEffect(() => { 
  isFirstRender.current = false // toggle flag after first render/mounting
}, [])

上面将setState最好地模拟回调，并且不会为初始状态触发。您可以从中提取自定义挂钩：

function useEffectUpdate(effect, deps) {
  const isFirstRender = useRef(true) 

  useEffect(() => {
    if (!isFirstRender.current) {
      effect()
    }  
  }, deps) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    isFirstRender.current = false;
  }, []);
}

// ... Usage inside component
useEffectUpdate(() => { console.log(state) }, [state])

我认为，使用useEffect不是一种直观的方法。

我为此创建了一个包装器。在此自定义挂钩中，您可以将回调传递给setState参数而不是useState参数。

我刚刚创建了Typescript版本。因此，如果您需要在Javascript中使用它，只需从代码中删除一些类型符号即可。

用法

const [state, setState] = useStateCallback(1);
setState(2, (n) => {
  console.log(n) // 2
});

宣言

import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';

type Callback<T> = (value?: T) => void;
type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void;

function useStateCallback<T>(initialState: T | (() => T)): [T, DispatchWithCallback<SetStateAction<T>>] {
  const [state, _setState] = useState(initialState);

  const callbackRef = useRef<Callback<T>>();
  const isFirstCallbackCall = useRef<boolean>(true);

  const setState = useCallback((setStateAction: SetStateAction<T>, callback?: Callback<T>): void => {
    callbackRef.current = callback;
    _setState(setStateAction);
  }, []);

  useEffect(() => {
    if (isFirstCallbackCall.current) {
      isFirstCallbackCall.current = false;
      return;
    }
    callbackRef.current?.(state);
  }, [state]);

  return [state, setState];
}

export default useStateCallback;

退税

如果传递的箭头函数引用了变量外部函数，则它将在状态更新后捕获当前值，而不是值。在上面的用法示例中，console.log（state）将输出1而不是2。

setState() 将组件状态更改入队，并告知React该组件及其子级需要使用更新后的状态重新呈现。

setState方法是异步的，事实上，它不返回promise。因此，在我们要更新或调用函数的情况下，可以在setState函数中将该函数作为第二个参数调用回调。例如，在上述情况下，您已将函数调用为setState回调。

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

上面的代码对于类组件很好用，但是在功能组件的情况下，我们不能使用setState方法，并且可以利用使用效果钩子来达到相同的结果。

显而易见的方法是，ypu可以与useEffect一起使用，如下所示：

const [state, setState] = useState({ name: "Michael" })

useEffect(() => {
  console.log(state) // do something after state has updated
}, [state])

但这也会在第一个渲染上触发，因此我们可以按以下方式更改代码，以便检查第一个渲染事件并避免状态渲染。因此，可以通过以下方式完成实现：

我们可以在此处使用用户挂钩来标识第一个渲染。

useRef Hook允许我们在功能组件中创建可变变量。这对于访问DOM节点/ React元素以及存储可变变量而不触发重新渲染很有用。

const [state, setState] = useState({ name: "Michael" });
const firstTimeRender = useRef(true);

useEffect(() => {
 if (!firstTimeRender.current) {
    console.log(state);
  }
}, [state])

useEffect(() => { 
  firstTimeRender.current = false 
}, [])

我遇到了同样的问题，在我的设置中使用useEffect并没有解决问题（我正在从多个子组件的数组更新父状态，并且我需要知道哪个组件更新了数据）。

将setState包装在promise中可以在完成后触发任意操作：

import React, {useState} from 'react'

function App() {
  const [count, setCount] = useState(0)

  function handleClick(){
    Promise.resolve()
      .then(() => { setCount(count => count+1)})
      .then(() => console.log(count))
  }


  return (
    <button onClick= {handleClick}> Increase counter </button>
  )
}

export default App;

以下问题使我朝着正确的方向： 使用钩子时，React批状态更新功能是否起作用？

您的问题非常有效，让我告诉您useEffect默认情况下运行一次，并且在每次依赖项数组更改后运行一次。

检查以下示例：：

import React,{ useEffect, useState } from "react";

const App = () => {
  const [age, setAge] = useState(0);
  const [ageFlag, setAgeFlag] = useState(false);

  const updateAge = ()=>{
    setAgeFlag(false);
    setAge(age+1);
    setAgeFlag(true);
  };

  useEffect(() => {
    if(!ageFlag){
      console.log('effect called without change - by default');
    }
    else{
      console.log('effect called with change ');
    }
  }, [ageFlag,age]);

  return (
    <form>
      <h2>hooks demo effect.....</h2>
      {age}
      <button onClick={updateAge}>Text</button>
    </form>
  );
}

export default App;

如果要使用挂钩执行setState回调，请使用标志变量，并在useEffect内提供IF ELSE或IF块，以便在满足该条件时仅执行该代码块。无论何时，效果都会随着依赖项数组的更改而运行，但是效果内部的IF代码将仅在特定条件下执行。

我有一个用例，在设置状态后，我想用一些参数进行api调用。我不想将这些参数设置为我的状态，所以我做了一个自定义钩子，这是我的解决方案

import { useState, useCallback, useRef, useEffect } from 'react';
import _isFunction from 'lodash/isFunction';
import _noop from 'lodash/noop';

export const useStateWithCallback = initialState => {
  const [state, setState] = useState(initialState);
  const callbackRef = useRef(_noop);

  const handleStateChange = useCallback((updatedState, callback) => {
    setState(updatedState);
    if (_isFunction(callback)) callbackRef.current = callback;
  }, []);

  useEffect(() => {
    callbackRef.current();
    callbackRef.current = _noop; // to clear the callback after it is executed
  }, [state]);

  return [state, handleStateChange];
};

UseEffect是主要解决方案。但是正如Darryl所述，使用useEffect并将状态作为第二个参数传递有一个缺陷，该组件将在初始化过程中运行。如果只希望回调函数使用更新后的状态值运行，则可以设置一个局部常量，并将其用于setState和回调中。

const [counter, setCounter] = useState(0);

const doSomething = () => {
  const updatedNumber = 123;
  setCounter(updatedNumber);

  // now you can "do something" with updatedNumber and don't have to worry about the async nature of setState!
  console.log(updatedNumber);
}