React.js 上下文提供者沒有將提供的值傳遞給 useContext

Question

問題：

我正在使用 useContext 掛鈎通過 DOM 傳遞數據，但現在唯一傳遞的數據是來自ImageContext的初始值。

我的發現：

• ImageContextProvider中的 State images具有正確的值（第一個初始聲明並更改獲取的數據）。
• 更改 state 的初始值（不是上下文），可在ImageContextProvider中找到，並沒有更改useContext掛鈎的 output -> 仍然只是發送了初始上下文值
• 將所有內容放入一個文件（以避免某種錯誤的引用）也不能解決問題
• 在堆棧溢出上沒有發現任何類似的問題

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;

可視化器.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;

Answer 1

我的問題的解決方案是將ImageContextProvider放在 canvas 中。 這是必要的，因為 canvas 中的元素使用不同的上下文，如下所述： https://github.com/pmndrs/react-three-fiber/blob/master/docs/API/hooks.mdx