วิธีใช้ "setState" callback บน react hooks

React hooks แนะนำuseStateสำหรับการตั้งค่าสถานะส่วนประกอบ แต่ฉันจะใช้ hooks เพื่อแทนที่การโทรกลับเช่นรหัสด้านล่างได้อย่างไร:

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

หากคุณต้องการอัปเดตสถานะก่อนหน้าคุณสามารถทำได้ใน hooks:

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โทรกลับได้ดีที่สุดและไม่เริ่มทำงานสำหรับสถานะเริ่มต้น คุณสามารถแยก Hook แบบกำหนดเองได้:

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 เป็นแบบอะซิงโครนัสและตามความเป็นจริงจะไม่ส่งคืนคำสัญญา ดังนั้นในกรณีที่เราต้องการอัปเดตหรือเรียกใช้ฟังก์ชันสามารถเรียกฟังก์ชันเรียกกลับในฟังก์ชัน setState เป็นอาร์กิวเมนต์ที่สองได้ ตัวอย่างเช่นในกรณีของคุณด้านบนคุณได้เรียกใช้ฟังก์ชันเป็นการเรียกกลับ setState

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

โค้ดด้านบนใช้งานได้ดีสำหรับองค์ประกอบคลาส แต่ในกรณีของส่วนประกอบการทำงานเราไม่สามารถใช้เมธอด setState ได้และเราสามารถใช้ use effect hook เพื่อให้ได้ผลลัพธ์เดียวกัน

วิธีการที่ชัดเจนที่นึกถึงคือ ypu สามารถใช้กับ useEffect ได้ดังนี้:

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

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

แต่สิ่งนี้จะเริ่มขึ้นในการเรนเดอร์ครั้งแรกเช่นกันดังนั้นเราจึงสามารถเปลี่ยนรหัสได้ดังนี้ซึ่งเราสามารถตรวจสอบเหตุการณ์การเรนเดอร์แรกและหลีกเลี่ยงการเรนเดอร์สถานะ ดังนั้นการใช้งานสามารถทำได้ด้วยวิธีต่อไปนี้:

เราสามารถใช้ user hook ที่นี่เพื่อระบุการเรนเดอร์แรก

useRef Hook ช่วยให้เราสร้างตัวแปรที่ไม่แน่นอนในส่วนประกอบที่ใช้งานได้ มีประโยชน์สำหรับการเข้าถึงโหนด DOM / องค์ประกอบการตอบสนองและเพื่อจัดเก็บตัวแปรที่เปลี่ยนแปลงได้โดยไม่ต้องทริกเกอร์การเรนเดอร์ซ้ำ

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

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

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

ฉันพบปัญหาเดียวกันโดยใช้ useEffect ในการตั้งค่าของฉันไม่ได้ทำเคล็ดลับ (ฉันกำลังอัปเดตสถานะของผู้ปกครองจากองค์ประกอบย่อยของอาร์เรย์หลายองค์ประกอบและฉันต้องการทราบว่าส่วนประกอบใดอัปเดตข้อมูล)

การห่อ setState ในสัญญาอนุญาตให้เรียกใช้การดำเนินการโดยพลการหลังจากเสร็จสิ้น:

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 batch state update functions เมื่อใช้ hooks หรือไม่?

คำถามของคุณถูกต้องมากขอให้ฉันบอกคุณว่า 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 ดำเนินการด้วย hooks ให้ใช้ตัวแปรแฟล็กและกำหนดบล็อก IF ELSE หรือ IF ภายใน useEffect เพื่อให้เมื่อเงื่อนไขนั้นเป็นที่พอใจแล้วให้ดำเนินการบล็อกโค้ดนั้นเท่านั้น อย่างไรก็ตามเวลาที่เอฟเฟกต์ทำงานเมื่ออาร์เรย์อ้างอิงเปลี่ยนแปลง แต่โค้ด 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);
}