Trạng thái mảng React không cập nhật

Question

Tôi muốn điền cả trạng thái mảng nhưng projectItems không cập nhật trong useState và khi tôi đặt projectItems, thành phần sẽ hiển thị lại. vì vậy, tôi đang sử dụng usecallback nhưng khi tôi đặt filterItems và projectItems làm mảng phụ thuộc trong useCallback và callback trong useState, useCallback không bao giờ chạy.

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

Vấn đề

Cập nhật trạng thái được xử lý giữa các chu kỳ kết xuất, vì vậy việc cố gắng đăng nhập hoặc sử dụng nó sẽ chỉ mang lại giá trị từ chu kỳ kết xuất hiện tại chứ không phải giá trị sẽ như thế nào trong chu kỳ kết xuất tiếp theo .

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

Giải pháp

Sử dụng móc hiệu ứng để "phản ứng" với projectItemscập nhật trạng thái để kích hoạt filteredItemscập nhật.

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

...

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

Ghi chú:

• Trừ khi callbackđược thực sự nhận được thông qua để một thành phần nhỏ, tôi không nghĩ rằng nó là cần thiết để memoize nó.
• Tôi không nghĩ projectItemsphải là một sự phụ thuộc vì hàm gọi lại móc cập nhật nó.
• filteredItems không phải là phần phụ thuộc vì nó không được tham chiếu trong lệnh gọi lại móc.

Answer 2

Bạn có thể sử dụng một useEffectphương pháp để cập nhật các thay đổi đối với mảng.

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