روش حل مشکل عدم بازتاب فوری تغییرات در متد set در useState

mohsen•1 سال قبل•1 سال قبل
ارسال شده در
react

در قطعه کد زیر با ست کردن مقدار movies بوسیله result، مقدار movies بلافاصله تغییر نمی کند:

       const { useState, useEffect } = React; // web-browser variant

const StateSelector = () => {
  const initialValue = [ ]; 
  const [movies, setMovies] = useState(initialValue); 
  useEffect(() => {
    (async function() { 
        const result = [
          {
            category: "cat1",
            description: "desc1",
            id: "1546514491119",
            name: "randomname2",
            photo: null,
            rating: "3"
          } 
        ];
        console.log("result =", result);
        setMovies(result);
        console.log("movies =", movies); // نمایش مقدار آرایه خالی
 
    })();
  }, []);

  return <p>hello</p>;
};

مشکل اصلی نه تنها ماهیت ناهمگام بودن به‌روزرسانی حالت (State) در React است، بلکه به نحوه استفاده از مقادیر حالت توسط توابع بر اساس بستارهای (Closures) جاری آنها نیز مربوط می‌شود. به‌روزرسانی‌های حالت در رندر بعدی منعکس می‌شوند، یعنی بعد از ست کردن مقدار movies بوسیله setMovies، مقدار movies در رندر بعدی مقدار جدید را به خود میگیرد.

اگر می‌خواهید پاسخ را با مقادیر موجود قبلی ادغام کنید، باید از سینتکس فراخوانی (callback) به‌روزرسانی حالت همراه با استفاده صحیح از سینتکس Spread استفاده کنید:

      setMovies(prevMovies => ([...prevMovies, ...result]));

به عنوان یک راه حل جایگزین، می‌توانید از کتابخانه‌هایی مانند react-usestateref استفاده کنید که به شما امکان می‌دهد هم از حالت (state) و هم از رفرنس (ref) استفاده کنید و همیشه به جدیدترین مقدار دسترسی داشته باشید:

      import useState from 'react-usestateref'
function MyComponent(){
  var [state,setState,ref]=useState(0)
  // ref.current همیشه آخرین مقدار را برمی گرداند
}
رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!