react组件upload上传成功，但是图片不显示问题

有这样一种情况，使用了antd组件库中的upload上传组件，添加图片，NetWork中显示upload成功，但是页面没有图片的展示，有一种情况是onchange事件只触发一次的情况，fileList不更新，
我遇到的情况是将fileList属性写入了upload组件，在state中之前定义好了fileList，只存了一次，并没有更新，我并没有使用onchange事件，而是使用了getValueFromEvent 这个方法可以拿到onchange事件的值，比原始组件库写的方法好的多，getFieldUrl获取 file中的response 再拿到图片的url地址

//获取真实图片地址
 getFileUrl = res => {
        const file = res.file;
        if (
            file &&
            file.response &&
            file.response.data &&
            file.response.data.length > 0
        ) {
            return file.response.data[0].file_url;
        } else {
            return '';
        }
    }
    beforeUpload = file => {
        const isJpgOrPng =
            file.type === 'image/jpeg' ||
            file.type === 'image/jpg' ||
            file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('上传类型错误jpg png格式');
            return false;
        }
        const limit = file.size < 5 * 1024 * 1024;
        if (!limit) {
            message.error('图片不能大于5M');
            return false;
        }
        return new Promise((resolve, reject) => {
            if (!isJpgOrPng && limit) {
                reject(file);
            } else {
                resolve(file);
            }
        });
    };

//页面展示
<Form.Item label="一级分类图片">
                    {getFieldDecorator('catImg', {
                        rules: [
                          {
                            required: true,
                            message: '请添加分类图片'
                          }
                        ],
                      getValueFromEvent: this.getFileUrl
                    })(
                      <Upload
                        name="file"
                        listType="picture-card"
                        action={ROOTPATH + 'basics/upload'}
                        headers={{ token: token }}
                        data={{ pixel: '100,100' }}
                        className="avatar-uploader"
                        showUploadList={false}
                        beforeUpload={this.beforeUpload}
                        fileList={fileList}
                      >
                        {getFieldValue('catImg') ? (
                          <img
                            src={getFieldValue('catImg')}
                            alt="avatar"
                            style={{ width: '100%' }}
                          />
                        ) : (
                            uploadButton
                          )}
                      </Upload>
                    )}
                    <p>
                      支持扩展名jpg/png,尺寸100*100
                    </p>
                  </Form.Item>

添加的时候，首次上传图片是没问题的，但是当编辑的时候，想要替换图片，发现请求了upload的接口，但是页面的图片没显示。

image.png

image.png

image.png

出现上图的提示报错是因为没加valuePropName属性，添加就好了
// valuePropName: 'fileList', 但是图片仍然不显示，这是因为当前上传图片类型只是单个file,将fileList改成file就解决了

<Form.Item label="一级分类图片">
                    {getFieldDecorator('catImg', {
                        rules: [
                          {
                            required: true,
                            message: '请添加分类图片'
                          }
                        ],
                      getValueFromEvent: this.getFileUrl,
                      valuePropName: 'file'
                    })(
                      <Upload
                        name="file"
                        listType="picture-card"
                        action={ROOTPATH + 'basics/upload'}
                        headers={{ token: token }}
                        data={{ pixel: '100,100' }}
                        className="avatar-uploader"
                        showUploadList={false}
                        beforeUpload={this.beforeUpload}
                      >
                        {getFieldValue('catImg') ? (
                          <img
                            src={getFieldValue('catImg')}
                            alt="avatar"
                            style={{ width: '100%' }}
                          />
                        ) : (
                            uploadButton
                          )}
                      </Upload>
                    )}
                    <p>
                      支持扩展名jpg/png,尺寸100*100
                    </p>
                  </Form.Item>

最终总结：
使用getFormEvent代替onchange事件，如果点击上传只有一张图片的情况下，添加属性valuePropName='file' ,如果上传图片列表，添加属性valuePropName='fileList'