React.js 上下文提供程序不将提供的值传递给 useContext

Question

问题：

我正在使用 useContext 挂钩通过 DOM 传递数据，但现在唯一传递的数据是来自 ImageContext 的初始值。

我的发现：

ImageContextProvider 中的状态 images 持有正确的值（第一个初始声明并更改获取的数据）。
更改状态（不是上下文）的初始值，可在 ImageContextProvider 中找到，并没有更改 useContext 挂钩的输出 -> 仍然只发送了初始上下文值
将所有内容放入一个文件（以避免某种错误引用）也没有解决问题
没有发现任何关于堆栈溢出的类似问题

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;

Answer 1

我的问题的解决方案是将 ImageContextProvider 放在 canvas 中。这是必要的，因为 canvas 中的元素使用不同的上下文，如下所述： https://github.com/pmndrs/react-three-fiber/blob/master/docs/API/hooks.mdx

React.js 上下文提供程序不将提供的值传递给 useContext

React.js Context Provider does not pass provided values to useContext

javascript

reactjs

react-fiber

use-context

问题：

我的发现：

image_context.js

visualizer.js

image_group.js