React Autocomplete выбирает значение, но отправляет пустой массив - PullRequest
Новая
       40

React Autocomplete выбирает значение, но отправляет пустой массив

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

Я работаю над функциональным компонентом React, который имеет форму. В этой форме Пользователь может загрузить фотографию и заполнить поля ввода, чтобы добавить описание. Поле ввода title является единственным полем, в котором я использую функцию автозаполнения.

Функция автозаполнения работает во внешнем интерфейсе, поскольку она отображает список параметров. Он также заполняется выбранной опцией.

Проблема: Когда я отправляю форму, поля ввода и значения публикуются очень хорошо (и сохраняются в БД), за исключением поля заголовка.

Ниже представлен файл console.log тела ответа. Как видите, заголовок просто возвращает и пустой массив.

{- писатель: '5e8ef5a7c1f3264288316550', - title: [], - description: 'At Sheraton Hotel, 2019 event.', - images: ['uploads \ 1586702830965_IMG_8413.JPG'], - Элемент списка

} Я следовал руководству Mo sh по автозаполнению по этой ссылке https://programmingwithmosh.com/react/simple-react-autocomplete-component/. 

import React, { useState } from 'react'
import { Typography, Button, Form, message, Input, Icon } from 'antd';
import FileUpload from '../../utils/FileUpload'
import Axios from 'axios';
import Countrylist from "./CountriesList"


const { Title } = Typography;
const { TextArea } = Input;

const Continents = [
    { key: 1, value: "Africa" },
    { key: 2, value: "Europe" },
    { key: 3, value: "Asia" },
    { key: 4, value: "North America" },
    { key: 5, value: "South America" },
    { key: 6, value: "Australia" },
    { key: 7, value: "Antarctica" }
]



function UploadProductPage(props) {

    const [TitleValue, setTitleValue] = useState([])
    const [DescriptionValue, setDescriptionValue] = useState("")
    const [PriceValue, setPriceValue] = useState(0)
    const [ContinentValue, setContinentValue] = useState(1)
    const [Images, setImages] = useState([])


    const updateCountry = (newCountry) => {
        setTitleValue(newCountry)
    }

    const onDescriptionChange = (event) => {
        setDescriptionValue(event.currentTarget.value)
    }

    const onPriceChange = (event) => {
        setPriceValue(event.currentTarget.value)
    }

    const onContinentsSelectChange = (event) => {
        setContinentValue(event.currentTarget.value)
    }

    const updateImages = (newImages) => {
        setImages(newImages)
    }
    const onSubmit = (event) => {
        event.preventDefault();


        if (!TitleValue || !DescriptionValue || !PriceValue ||
            !ContinentValue || !Images) {
            return alert('fill all the fields first!')
        }

        const variables = {
            writer: props.user.userData._id,
            title: TitleValue,
            description: DescriptionValue,
            price: PriceValue,
            images: Images,
            continents: ContinentValue,
        }

        Axios.post('/api/product/uploadProduct', variables)
            .then(response => {
                if (response.data.success) {
                    alert('Product Successfully Uploaded.  The Country is ' + variables.title)
                    props.history.push('/')
                } else {
                    alert('Failed to upload Product')
                }
            })

    }

    return (
        <div style={{
            maxWidth: '700px',
            margin: '2rem auto',
            padding: "10px",
            borderRadius: "10px",
            backgroundColor: "rgba(255, 255, 255, 0.75)"
        }}>
            <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                <Title level={2}> Upload New Photo</Title>
            </div>


            <Form onSubmit={onSubmit}>

                {/* DropZone */}
                <FileUpload refreshFunction={updateImages} />

                <br />
                <br />
                <label>Title </label>
                <Countrylist
                    onChange={updateCountry}
                    value={TitleValue}
                    onSelect={(value) => TitleValue = value}
                    name="title"
                />

                <br />
                <label>Description</label>
                <TextArea
                    onChange={onDescriptionChange}
                    value={DescriptionValue}
                />
                <br />
                <br />
                <label>Year</label>
                <Input
                    onChange={onPriceChange}
                    placeholder="Enter four digit year"
                    value={PriceValue}
                    type="number"
                />
                <br /><br />
                <select onChange={onContinentsSelectChange}>
                    {Continents.map(item => (
                        <option key={item.key} value={item.key}>{item.value} </option>
                    ))}
                </select>
                <br />
                <br />

                <Button
                    onClick={onSubmit}
                >
                    Submit
                </Button>

            </Form>

        </div>
    )
}

export default UploadProductPage
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.0/umd/react-dom.production.min.js"></script>

1 Ответ

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

Ваш onSelect не меняет значение TitleValue.

Я не уверен, что значение, которое вы передаете, является допустимым, убедитесь, что вы можете console.log (value) и увидеть, что это когда вы используете onSelect. 

    onSelect={(value) => TitleValue = value}

, вы должны использовать Hook setTitleValue, который вы инициализировали, или ту функцию, которая вызывает setTitleValue 

    const updateCountry = (newCountry) => {
        setTitleValue(newCountry)
    }

    onSelect={value => {
       console.log(value)  //make sure you are getting the right data
       setTitleValue(value)
    }}

Ваш onChange также должен иметь дело с event.target.value, поэтому вам нужно обновить updateCountry 

    const updateCountry = e => {
        setTitleValue(e.target.value)
    }
...