나는 반응 코드가 있습니다.
empty state
fills
상태renders
일부 이미지onLoad
이벤트 를 트리거합니다.function
이 reads
초기를state
empty
어떻게 그럴 수 있습니까? 함수가 호출되면 상태가 더 이상 비어 있지 않음을 의미합니다.
펜 https://codesandbox.io/s/usestate-strange-things-9rydu
코드
import React, { useRef, useState, useEffect } from "react";
import styled from "@emotion/styled";
const useMyHook = (virtual_structure, setVirtual_structure) => {
useEffect(() => {
console.log("virtual_structure is updated!");
console.log(virtual_structure);
console.log("____virtual_structure is updated!");
}, [virtual_structure]);
const refs = useRef([]);
const createStructure = () => {
console.log("virtual_structure, is it empty?");
console.log(virtual_structure);
};
useEffect(() => {
createStructure();
}, []);
const assignRef = r =>
r && (refs.current.includes(r) || refs.current.push(r));
return [assignRef, createStructure];
};
export default function App() {
const [virtual_structure, setVirtual_structure] = useState([]);
const [assignRef, updateGrid] = useMyHook(
virtual_structure,
setVirtual_structure
);
useEffect(() => {
const temp_structure = Array.from({ length: 4 }, () => ({
height: 0,
cells: []
}));
temp_structure[0].cells = Array.from({ length: 10 }, () => {
const rand = Math.random();
const r = rand > 0.1 ? parseInt(500 * rand) : parseInt(500 * 0.1);
return {
height: "",
el: (
<div ref={assignRef}>
<Image
alt=""
onload={updateGrid}
num=""
src={`https://picsum.photos/200/${r}`}
/>
</div>
)
};
});
setVirtual_structure(temp_structure);
}, []);
return (
<Container>
{virtual_structure.map((col, i) => (
<div key={`col${i}`}>
{col.cells && col.cells.map((cell, j) => <>{cell.el}</>)}
</div>
))}
</Container>
);
}
const Image = ({ alt, onload, num, src }) => (
<>
<Label>{num}</Label>
<Img src={src} alt={alt} onLoad={onload} />
</>
);
const Img = styled.img`
border: 1px solid #000;
height: min-content;
margin: 0;
padding: 0;
`;
const Label = styled.div`
position: absolute;
`;
const Container = styled.div`
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: #ccc;
align-content: center;
div {
flex: 1;
div {
color: #fff;
font-weight: 700;
font-size: 32px;
margin: 4px;
}
}
`;
그리고 console.log
virtual_structure is updated!
index.js:27 Array(0)length: 0__proto__: Array(0)
index.js:27 ____virtual_structure is updated!
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure is updated!
index.js:27 Array(4)0: {height: 0, cells: Array(10)}1: {height: 0, cells: Array(0)}2: {height: 0, cells: Array(0)}3: {height: 0, cells: Array(0)}length: 4__proto__: Array(0)
index.js:27 ____virtual_structure is updated!
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 Array(0)length: 0__proto__: Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 []length: 0__proto__: Array(0)
index.js:27 virtual_structure, is it empty?
index.js:27 []
@ Dennis-vash 답변에서 말했듯이 "클로저"는 useState
범위 함수 내에서 변수를 고정하므로이 함수는이 변수의 현재 (업데이트 된) 값을 볼 수 없습니다.
해결 방법은 논리를 실행하는 함수를 호출하는 대신 항상 상태를 업데이트하는 함수를 호출 한 다음이 상태를 사용하여 함수를 트리거 할 수 있다는 것입니다 (이제 함수 대신 useEffect 사용).
누군가이 문제를 해결하기 위해 더 나은 대안을 제안하고 싶은 경우를 대비하여 며칠 동안 질문을 열어 두겠습니다 (?)
코드
https://codesandbox.io/s/usestate-strange-things-tneue
import React, { useRef, useState, useEffect } from "react";
import styled from "@emotion/styled";
const useMyHook = (virtual_structure, setVirtual_structure, updateGrid) => {
const refs = useRef([]);
useEffect(() => {
console.log("virtual_structure, is it empty?");
console.log(virtual_structure);
}, [updateGrid, virtual_structure]);
const assignRef = r =>
r && (refs.current.includes(r) || refs.current.push(r));
return [assignRef];
};
export default function App() {
const [virtual_structure, setVirtual_structure] = useState([]);
const [updateGrid, setUpdateGrid] = useState();
const [assignRef] = useMyHook(
virtual_structure,
setVirtual_structure,
updateGrid
);
const update = async () => setUpdateGrid(updateGrid + 1);
useEffect(() => {
const temp_structure = Array.from({ length: 4 }, () => ({
height: 0,
cells: []
}));
temp_structure[0].cells = Array.from({ length: 10 }, () => {
const rand = Math.random();
const r = rand > 0.1 ? parseInt(500 * rand) : parseInt(500 * 0.1);
return {
height: "",
el: (
<div ref={assignRef}>
<Image
alt=""
onload={update}
num=""
src={`https://picsum.photos/200/${r}`}
/>
</div>
)
};
});
setVirtual_structure(temp_structure);
}, []);
return (
<Container>
{virtual_structure.map((col, i) => (
<div key={`col${i}`}>
{col.cells &&
col.cells.map((cell, j) => (
<React.Fragment key={`cell${j}`}>{cell.el}</React.Fragment>
))}
</div>
))}
</Container>
);
}
const Image = ({ alt, onload, num, src }) => (
<>
<Label>{num}</Label>
<Img src={src} alt={alt} onLoad={onload} />
</>
);
const Img = styled.img`
border: 1px solid #000;
height: min-content;
margin: 0;
padding: 0;
`;
const Label = styled.div`
position: absolute;
`;
const Container = styled.div`
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: #ccc;
align-content: center;
div {
flex: 1;
div {
color: #fff;
font-weight: 700;
font-size: 32px;
margin: 4px;
}
}
`;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다