Cách sử dụng lệnh gọi lại `setState` trên các móc phản ứng

React hooks giới thiệu useStateđể thiết lập trạng thái thành phần. Nhưng làm cách nào tôi có thể sử dụng hook để thay thế lệnh gọi lại như mã dưới đây:

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

Tôi muốn làm điều gì đó sau khi trạng thái được cập nhật.

Tôi biết tôi có thể sử dụng useEffectđể làm những việc bổ sung nhưng tôi phải kiểm tra giá trị trước đó của trạng thái yêu cầu mã bit. Tôi đang tìm kiếm một giải pháp đơn giản có thể được sử dụng với useStatehook.

Bạn cần phải sử dụng useEffecthook để đạt được điều này.

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

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

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

Nếu bạn muốn cập nhật trạng thái trước đó thì bạn có thể làm như sau trong hooks:

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


setCount(previousCount => previousCount + 1);

useEffect, chỉ kích hoạt khi cập nhật trạng thái :

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
}, [])

Ở trên sẽ bắt chước lệnh setStategọi lại tốt nhất và không kích hoạt ở trạng thái ban đầu. Bạn có thể trích xuất một Hook tùy chỉnh từ nó:

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])

Tôi nghĩ, sử dụng useEffectkhông phải là một cách trực quan.

Tôi đã tạo một trình bao bọc cho việc này. Trong móc tùy chỉnh này, bạn có thể truyền lệnh gọi lại của mình tới setStatetham số thay vì useStatetham số.

Tôi vừa tạo phiên bản Typecript. Vì vậy, nếu bạn cần sử dụng điều này trong Javascript, chỉ cần xóa một số ký hiệu kiểu khỏi mã.

Sử dụng

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

Tờ khai

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;

Hạn chế

Nếu hàm mũi tên được truyền tham chiếu đến một hàm bên ngoài có thể thay đổi, thì nó sẽ nắm bắt giá trị hiện tại không phải là giá trị sau khi trạng thái được cập nhật. Trong ví dụ sử dụng ở trên, console.log (state) sẽ in 1 không phải 2.

Câu hỏi của bạn rất hợp lệ, hãy để tôi nói với bạn rằng useEffect chạy một lần theo mặc định và sau mỗi lần mảng phụ thuộc thay đổi.

kiểm tra ví dụ bên dưới ::

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;

Nếu bạn muốn lệnh gọi lại setState được thực thi với các hook thì hãy sử dụng biến cờ và cung cấp khối IF ELSE OR IF bên trong useEffect để khi các điều kiện đó được thỏa mãn thì chỉ khối mã đó thực thi. Dù thời gian hiệu ứng chạy như thế nào khi mảng phụ thuộc thay đổi nhưng mã IF bên trong có hiệu lực sẽ chỉ thực thi trên các điều kiện cụ thể đó.

setState() Xếp hàng các thay đổi đối với trạng thái thành phần và nói với React rằng thành phần này và các thành phần con của nó cần được hiển thị lại với trạng thái đã cập nhật.

Phương thức setState là không đồng bộ và trên thực tế, nó không trả về một lời hứa. Vì vậy, trong trường hợp chúng ta muốn cập nhật hoặc gọi một hàm, hàm có thể được gọi là hàm callback trong hàm setState làm đối số thứ hai. Ví dụ, trong trường hợp của bạn ở trên, bạn đã gọi một hàm dưới dạng gọi lại setState.

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

Đoạn mã trên hoạt động tốt cho thành phần lớp, nhưng trong trường hợp thành phần chức năng, chúng ta không thể sử dụng phương thức setState và điều này chúng ta có thể sử dụng use effect hook để đạt được kết quả tương tự.

Phương pháp hiển nhiên mà bạn cần lưu ý là ypu có thể sử dụng với useEffect như sau:

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

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

Nhưng điều này cũng sẽ kích hoạt trong lần hiển thị đầu tiên, vì vậy chúng ta có thể thay đổi mã như sau, nơi chúng ta có thể kiểm tra sự kiện kết xuất đầu tiên và tránh trạng thái kết xuất. Do đó, việc triển khai có thể được thực hiện theo cách sau:

Chúng ta có thể sử dụng user hook tại đây để xác định kết xuất đầu tiên.

UseRef Hook cho phép chúng ta tạo các biến có thể thay đổi trong các thành phần chức năng. Nó hữu ích để truy cập các nút DOM / phần tử React và lưu trữ các biến có thể thay đổi mà không cần kích hoạt kết xuất lại.

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

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

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

Tôi có một trường hợp sử dụng mà tôi muốn thực hiện một cuộc gọi api với một số tham số sau khi trạng thái được thiết lập. Tôi không muốn đặt các thông số đó làm trạng thái của mình nên tôi đã tạo một móc tùy chỉnh và đây là giải pháp của tôi

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 là giải pháp chính. Nhưng như Darryl đã đề cập, việc sử dụng useEffect và chuyển vào trạng thái như tham số thứ hai có một lỗ hổng, thành phần sẽ chạy trong quá trình khởi tạo. Nếu bạn chỉ muốn hàm gọi lại chạy bằng giá trị của trạng thái đã cập nhật, bạn có thể đặt một hằng số cục bộ và sử dụng hằng số đó trong cả setState và callback.

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