React 배열 상태가 업데이트되지 않습니다.

Question

배열 상태를 모두 채우고 싶지만 projectItems는 useState에서 업데이트되지 않으며 projectItems를 넣으면 구성 요소가 다시 렌더링됩니다. 그래서 usecallback을 사용하고 있지만 filterItems 및 projectItems를 useCallback에 종속성 배열로 넣고 useState에 콜백을 넣으면 useCallback이 실행되지 않습니다.

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

발행물

상태 업데이트는 렌더주기 사이에 처리되므로이를 기록하거나 사용하려고 하면 다음 렌더주기 가 아닌 현재 렌더주기 의 값만 산출 됩니다 .

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

해결책

효과 후크를 사용하여 projectItems상태 업데이트에 "반응"하여 업데이트를 트리거합니다 filteredItems.

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

...

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

메모:

• 하지 않으면 callback됩니다 실제로 아이 컴퍼넌트에 전달하기 나는 그것을 memoize 할 필요는 생각하지 않습니다.
• projectItems후크 콜백 함수가이를 업데이트하기 때문에 종속성이되어야 한다고 생각하지 않습니다 .
• filteredItems 후크 콜백에서 참조되지 않으므로 종속성이 아닙니다.

Answer 2

useEffect방법을 사용 하여 배열의 변경 사항을 업데이트 할 수 있습니다 .

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