javascript - 为什么这个上下文提供者在 react.js 中向消费者发送 null

Question

我正在尝试使用上下文，但每次提供者都向消费者发送空对象。请让我知道我的代码哪里出了问题。我想从一个组件向另一个组件发送和声明。他们都不是另一个人的孩子，他们都在组件文件夹下。

下面是创建、使用和消费的过程：

ImageContext.js

import React from 'react';

const ImageContext = React.createContext()
export default ImageContext;
  

在此函数中 selectedFileName 采用所选文件 ImageUpload.js 的名称

onFileChange = event => {
        this.setState({ selectedFile: event.target.files[0] });
        this.setState({ selectedFileName: event.target.files[0].name });
    };

提供者：

return (
            <ImageContext.Provider value={{ this.state.selectedFileName }}>
           
                </div>

                    <div onClick={this.onNavToEditor}>

                    {this.listItems()}

                 </div>

            </div>

            </ImageContext.Provider >

        );

消费者：

return (
  <ImageContext.Consumer>
    {(value) => (
     
        <ImageEditor
          includeUI={{
          
            loadImage: {
              path: value.path,
              name: value,
            },
         
    )}
  </ImageContext.Consumer>
);

您可以看到上面的路径和名称正在使用上下文。

为什么提供者将空对象发送给消费者？

我应该在这里提到我已经删除了一些代码部分来缩短它。

标签： javascriptreactjs