Problem:
I'm using the useContext hook to pass data though the DOM, but the only data that gets passed right now, are the initial values from the ImageContext.
My Findings:
- The State
imagesinImageContextProviderholds the correct values (First initial declaration and alter the fetched data). - Changing initial values of the state (not the context), findable in the
ImageContextProvider, didn't change the output of theuseContexthook -> Still just the inital context values were sent - Putting everything into one file (to avoid some kind of wrong referencing) didn't fix the problem either
- Didn't find any similar problem on stack overflow
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;
visualizer.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;
