Аватар всегда отображается как неопределенный при использовании в FormData в ReactJS - PullRequest
Новая
       45

Аватар всегда отображается как неопределенный при использовании в FormData в ReactJS

0 голосов
/ 25 апреля 2020

Я пытаюсь создать форму, в которой я объединяю текстовые вводы и ввод файла все вместе, и все работало нормально, пока я не решил реализовать указанный ввод файла.

Это мой код: 

const [producerData, setProducerData] = useState({
    title: '',
    text: '',
    address: '',
    status: '',
    avatar: '',
});

const { title, text, address, status, avatar } = producerData;

const [avatarname, setAvatarName] = useState('Choose Avatar');
const [uploadPercentage, setUploaderPercentage] = useState(0);

const handleChange = name => e => {
    setProducerData({...producerData, [name]: e.target.value });
    // setAvatar(e.target.files[0]);
    name === 'avatar' && setProducerData({...producerData, avatar: e.target.files[0]}) && setAvatarName(e.target.files[0].name);
    // console.log(e.target.files);
}

const addProducer = async e => {
    e.preventDefault();
    const formData = new FormData();
    producerData.avatar = formData.append('avatar', avatar);

    console.log(producerData);
    // addProducer(producerData, setUploaderPercentage);
}

Скажем так, это работает, если я создаю функцию, может быть setAvatar, как прокомментировано в коде. Это работает, но когда я пытаюсь использовать его в том же объекте, что и providerData, он всегда возвращает неопределенное значение.

EDIT : я обнаружил в нескольких потоках StackOverflow, что для обработки обычного и файлового ввода вместе мне нужно сделать что-то вроде этого: 

const addProducer = async e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append( 'title', e.target.title.value)
    formData.append( 'text', e.target.text.value)
    formData.append( 'address', e.target.address.value)
    formData.append( 'status', e.target.status.value)
    formData.append('avatar', e.target.avatar.files[0]);
    console.log(formData);
    // setAvatarName(e.target.files[0].name);
    // addProducer(producerData, setUploaderPercentage);
}

и мне нужно удалить атрибуты onChange и value из моих входных данных. Исходя из этого: 

<Form.Group>
    <Form.Label htmlFor={`title`}>Title</Form.Label>
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Text id={`title-text`}>
                <i className={`fas fa-heading`} />
            </InputGroup.Text>
        </InputGroup.Prepend>
        <Form.Control
            type={`text`}
            placeholder={`Title`}
            aria-label={`title`}
            aria-describedby={`title-text`}
            autoComplete={`title`}
            name={`title`}
            id={`title`}
            required
            onChange={handleChange('title')}
            value={title}
        />
    </InputGroup>
</Form.Group>

к этому: 

<Form.Group>
    <Form.Label htmlFor={`title`}>Title</Form.Label>
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Text id={`title-text`}>
                <i className={`fas fa-heading`} />
            </InputGroup.Text>
        </InputGroup.Prepend>
        <Form.Control
            type={`text`}
            placeholder={`Title`}
            aria-label={`title`}
            aria-describedby={`title-text`}
            autoComplete={`title`}
            name={`title`}
            id={`title`}
            required
        />
    </InputGroup>
</Form.Group>

Это всего лишь пример того, как у меня есть остальные входы, с которыми я работаю. Надеюсь, я смогу понять.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Устанавливаем dataData таким же образом, как в методе handleChange.

0 голосов
/ 25 апреля 2020

я знаю, что всякий раз, когда вы используете useState() hook, вам будет предоставлено [variable , setVariable] вместо состояния в полных компонентах компонентах 'classes', и цель функции setVaraiable() состоит в том, чтобы контролировать значение вашей переменной, так что я полагаю, вам не разрешен доступ, установите значение, используя producerData.avatar.

...