Status array React tidak diperbarui

Question

Saya ingin mengisi kedua status array tetapi projectItems tidak diperbarui di useState dan ketika saya meletakkan projectItems, komponen merender ulang. jadi, saya menggunakan usecallback tetapi ketika saya meletakkan filteredItems dan projectItems sebagai array dependensi di useCallback dan callback di useState, useCallback tidak pernah berjalan.

const [filteredItems, setfilteredItems] = useState([]);
const [projectItems, setProjectItems] = useState([]);

const { projects } = props;


const callback = useCallback(() => {
        console.log('callback');
        const projectData = projects.map(i => {
            return (
                {
                    key: '1',
                    projectName: i.project_name,
                    size: i.size,
                    location: i.location,
                    status: `Day ${i.Finished_events_days}/${i.total_days_needed}`,
                    score: `${i.score}/10`,
                    view: <a>View Project</a>,
                    download: <a>Download</a>,
                    feedback: <a>Feedback</a>,
                    audit: <a>Audit</a>
                })
        });

        setProjectItems(prevState => [...prevState, ...projectData]);
        console.log(projectItems);
        setfilteredItems([...projectItems]);
    }, [projectItems, filteredItems]);

    useEffect(() => {

    }, [callback]);

Answer 1

Isu

Update Negara diproses antara membuat siklus, sehingga mencoba untuk login atau menggunakannya hanya akan menghasilkan nilai dari saat ini membuat siklus, tidak apa akan di depan siklus render.

setProjectItems(prevState => [...prevState, ...projectData]);
console.log(projectItems); // <-- current state!
setfilteredItems([...projectItems]); // <-- current state!

Larutan

Gunakan efek hook untuk "bereaksi" terhadap projectItemspembaruan status untuk memicu filteredItemspembaruan.

...
setProjectItems(prevState => [...prevState, ...projectData]);

...

useEffect(() => {
  console.log(projectItems); // <-- updated state!
  setfilteredItems([...projectItems]); // <-- updated state!
}, [projectItems]);

Catatan:

• Kecuali callbackyang sebenarnya mendapatkan diteruskan ke komponen anak saya tidak berpikir itu perlu untuk memoize itu.
• Saya tidak berpikir projectItemsharus menjadi ketergantungan karena fungsi panggilan balik hook memperbaruinya.
• filteredItems bukan ketergantungan karena tidak direferensikan di hook callback.

Answer 2

Anda dapat menggunakan useEffectmetode untuk memperbarui perubahan ke array.

useEffect(() => {
  setfilteredItems([...projectItems]);
}, [projectItems]);