Problema:

Estoy usando el enlace useContext para pasar datos a través del DOM, pero los únicos datos que se pasan en este momento son los valores iniciales de ImageContext .

Mis hallazgos:

• Las images de estado en ImageContextProvider contienen los valores correctos (primera declaración inicial y alteración de los datos obtenidos).
• Cambiar los valores iniciales del estado (no el contexto), que se puede encontrar en ImageContextProvider , no cambió la salida del useContext -> Aún así, solo se enviaron los valores de contexto iniciales
• Poner todo en un solo archivo (para evitar algún tipo de referencia incorrecta) tampoco solucionó el problema.
• No encontré ningún problema similar en el desbordamiento de pila

image_context.js

 export const ImageContext = createContext({ images: [], loading: true, setImages: () => {}, }); const ImageContextProvider = props => { const [images, setImages] = useState({ images: [], loading: true }); // Array instead of object const fetchData = () => { imagesServices.loadImages().then((img) => { setImages({ images: img, loading: false }) }) } useEffect(() => { fetchData(); }, []); useDebugValue(images ?? 'loading...') let value = {images: images.images, loading: images.loading, setImages: setImages} return( <ImageContext.Provider value={value}> {props.children} </ImageContext.Provider> ); }; export default ImageContextProvider;

visualizador.js

 const Visualizer = () => { return ( <ImageContextProvider> <Canvas camera={{position: new THREE.Vector3( 0, 0, -0.5 ), fov: 60}}> <ambientLight intensity={0.3}/> <group> <ImageGroup /> </group> <OrbitControls enableZoom={false} enablePan={false}/> </Canvas> </ImageContextProvider> ); }; export default Visualizer;

image_group.js

 const ImageGroup = (props) => { const { roomID = '0', ...restProps } = props; const {images, loading, setImages} = useContext(ImageContext); if (images.loading) return null return ( <Suspense fallback={null}> { images.map((img) => (<ImagePlane key={img['imageID']} imgLink={img['imgLink']} position={img['position']} aspectRatio={img['aspect_ratio']}/>) ) } </Suspense> ); }; export default ImageGroup;