Показать список загруженных файлов antd

Question

Я работаю над проектом, в котором я использую antd 4. У меня проблема со списком загрузок antd.

В основном у меня есть пользователь, который загрузил документы, и теперь, когда пользователь пытается для редактирования файлы, которые он загрузил, не отображаются. Данные поступают от cook ie вся форма заполнена, кроме компонента загрузки.

вот код того же.

<Form
            layout="vertical"
            className="user-forms"
            name="editprofile"
            initialValues={{
              remember: true,
              id: user.id,
              firstname: user.first_name,
              lastname: user.last_name,
              uploadotherdoc: user.userDocuments
                ? user.userDocuments.map(item => ({
                  ...item,
                  uid: Math.random(),
                }))
                : null,
            }}
            colon={false}
            onFinish={values => onFinish(values, editAgentDetailsData)}
            onFinishFailed={onFinishFailed}
          >
          <Row gutter={16}>
              <Col xs={24} lg={8}>
                <Form.Item
                  name="firstname"
                  label={formatMessage({
                    id: 'component.form.firstname',
                  })}
                  rules={[
                    {
                      required: true,
                      message: `Please Enter the ${formatMessage({
                        id: 'component.form.firstname',
                      })}`,
                    },
                  ]}
                >
                  <Input
                    defaultValue="Emile"
                    style={{ width: '100%' }}
                    placeholder={formatMessage({
                      id: 'component.form.firstname',
                    })}
                    size="large"
                    className="pickerwidth"
                  />
                </Form.Item>
              </Col>
              <Col xs={24} lg={8}>
                <Form.Item
                  name="lastname"
                  label={formatMessage({
                    id: 'component.form.lastname',
                  })}
                  rules={[
                    {
                      required: true,
                      message: `Please Enter the ${formatMessage({
                        id: 'component.form.lastname',
                      })}`,
                    },
                  ]}
                >
                  <Input
                    defaultValue="Pettersen"
                    placeholder={formatMessage({
                      id: 'component.form.lastname',
                    })}
                    size="large"
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col xs={24} lg={8}>
                <Form.Item
                  name="email"
                  label={formatMessage({
                    id: 'component.form.email',
                  })}
                  rules={[
                    {
                      required: true,
                      message: `Please Enter the ${formatMessage({
                        id: 'component.form.email',
                      })}`,
                    },
                  ]}
                >
                  <Input
                    disabled
                    defaultValue="emilieP12@webmegling.no"
                    style={{ width: '100%' }}
                    placeholder={formatMessage({
                      id: 'component.form.email',
                    })}
                    size="large"
                    className="pickerwidth"
                  />
                </Form.Item>
              </Col>
              <Col xs={24} lg={8}>
                <Form.Item
                  name="phone"
                  label={formatMessage({
                    id: 'component.form.phone',
                  })}
                  rules={[
                    {
                      required: true,
                      message: `Please Enter the ${formatMessage({
                        id: 'component.form.phone',
                      })}`,
                    },
                  ]}
                >
                  <Input
                    // disabled
                    placeholder={formatMessage({
                      id: 'component.form.phone',
                    })}
                    size="large"
                  />
                </Form.Item>
              </Col>
            </Row>
          <Row gutter={8}>
              <Col xs={24} lg={16}>
                <Form.Item
                  name="uploadotherdoc"
                  label={formatMessage({
                    id: 'component.form.uploadotherdoc',
                  })}
                  valuePropName="fileList"
                  rules={[
                    {
                      required: true,
                      message: `Please Enter the ${formatMessage({
                        id: 'component.form.uploadotherdoc',
                      })}`,
                    },
                  ]}
                >
                  <Upload
                    accept=".pdf"
                    defaultFileList={user.userDocuments.map(item => ({
                      ...item,
                      uid: Math.random(),
                    }))}
                    {...docprops}
                    action={onactionChange}
                    onChange={onUploadDocChange}
                  >
                    <Button className="borderradius">
                      <UploadOutlined />
                      {formatMessage({
                        id: 'component.form.uploadotherdoc',
                      })}
                    </Button>
                  </Upload>
                </Form.Item>
              </Col>
            </Row>
            <Row className="mt-3">
              <Col xs={24}>
                <div className="flex-container">
                  <div>
                    <Button
                      type="primary"
                      htmlType="submit"
                      className="primary buttons admin-forms-btn"
                      size="large"
                    >
                      {formatMessage({
                        id: 'component.form.update',
                      })}
                    </Button>
                    <Button
                      className="text-primary admin-forms-btn cancel-btn"
                      style={{ marginLeft: 8 }}
                      size="large"
                      onClick={router.goBack}
                    >
                      {formatMessage({
                        id: 'component.form.cancel',
                      })}
                    </Button>
                  </div>
                </div>
              </Col>
            </Row>
          </Form>

Я пробовал довольно много вещей, но ничего не помогло. Буду признателен, если кто сможет в этом разобраться. это минимальная демонстрация.

Answer 1

Трудно сказать, что происходит не так, поскольку ваш пример скрывает множество деталей реализации, но вот минимальная рабочая демонстрация CodeSandbox того, что вы пытаетесь выполнить sh.

CodeSandbox: демонстрация предварительного просмотра загрузки формы

Несколько примечаний: кажется излишним устанавливать как значение defaultFileList непосредственно в компоненте Upload, так и значение по умолчанию для uploadotherdoc через initialValues на компоненте Form. Я считаю, что правильным вариантом использования является установка значения по умолчанию через initialValues в Form.

Также кажется странным, что вы напрямую контролируете поведение компонента Upload через обработчик onChange , поскольку эта функция обрабатывается компонентом Form через обработчик getValueFromEvent в Form.Item, который является оболочкой для компонента Upload. См. Подробности в демонстрации.

И последнее: ставить uid случайным образом, вероятно, не лучшая идея. Он должен быть уникальным и стабильным, поскольку он используется как свойство React key для загруженного списка предварительного просмотра.