React select loadOptions не вызывается во 2-м рендере - PullRequest
Новая
       15

React select loadOptions не вызывается во 2-м рендере

0 голосов
/ 02 февраля 2020

У меня есть два асин c поля формы. Основываясь на выборе первого поля, второе поле извлекает данные с помощью функции loadOptions. Я заметил, что при изменении ввода в первом поле loadOptions 2-го поля не выполняется повторно. Я заметил, что при изменении ввода в первом поле loadOptions 2-го поля не выполняется повторно. Как решить эту проблему?

Reaction-select 

<code>import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { useApolloClient} from 'react-apollo';
import { Formik, Form, ErrorMessage } from 'formik';
import * as Yup from "yup";
import AsyncSelect from 'react-select/async'
import AsyncPaginate from 'react-select-async-paginate'
import { GET_ITEM_CODES, GET_ITEMCODE_SPECIFICATIONS } from '../../library/Query';

export default function SampleForm({initialData}){
const history = useHistory();

const [productFilter, setProductFilter] = useState('');

const client = useApolloClient();

const defaultAdditional = {
    cursor : null
}
const shouldLoadMore = (scrollHeight, clientHeight, scrollTop) => {
    const bottomBorder = (scrollHeight - clientHeight) / 2
     return bottomBorder < scrollTop
}
const loadItemcodeOptions = async (q = 0, prevOptions, {cursor}) => {
    console.log('qu',q*1)
    const options = [];
    console.log('load')
    const response = await client.query({
        query:GET_ITEM_CODES,
        variables : {filter: {
            number_gte : q*1
        },skip:0, first:4, after: cursor}
    })

    console.log('res',response)
    response.data.itemCodes.itemCodes.map(item => {
        return options.push({
            value: item.number,
            label: `${item.number} ${item.description}`
        })
    })
    console.log('0',options)

    return {
        options,
        hasMore: response.data.itemCodes.hasMore,
        additional: {
            cursor: response.data.itemCodes.cursor.toString()
        }
    }
}

const loadProductOptions = async (productFilter) => {
    console.log('x', productFilter)
    if(!!productFilter){
        console.log('if',!productFilter)
        const response = await client.query({
            query: GET_ITEMCODE_SPECIFICATIONS,
            variables: { filter: {
                itemCode: productFilter
            }}
        })

        console.log('respo',response.data)

        const options = [];
        response.data.itemCodeSpecifications.map(item => {
            return options.push({
                value: item.product,
                label: `${item.product}`
            })
        })
        console.log(options) 
        return options
    }else {
        console.log('else')
        return []
    }
}

const handleFilter = (e) => {
    console.log('e',e)
    setProductFilter(e.value)
    console.log('pf',productFilter)
}

useEffect(() => {
    console.log('epf',productFilter)
})
console.log('rpf',productFilter)
return(
    <Formik
       initialValues = {{
           itemCode: !!initialData ? {value: initialData.itemCode, label: initialData.itemCode} : '',
       }}

       validationSchema = {Yup.object().shape({
           itemCode: Yup.number().required('Required'),
       })}
    >
        {({values, isSubmitting, setFieldValue, touched, errors }) => (
            <Form>
                <label htmlFor="itemCode">Item Code</label>
                <AsyncPaginate
                    name="itemCode"
                    defaultOptions
                    debounceTimeout={300}
                    cacheOptions
                    additional={defaultAdditional}
                    value={values.itemCode}
                    loadOptions={loadItemcodeOptions}
                    onChange={option => {
                        handleFilter(option)
                        setFieldValue('itemCode', option)
                    }}
                    shouldLoadMore={shouldLoadMore}
                />
                <ErrorMessage name="itemcode"/>
                <div>rerender{productFilter}</div>
                <AsyncSelect
                    name="product"
                    isDisabled={!productFilter} 
                    cacheOptions
                    defaultOptions
                    value={values.product}
                    loadOptions={loadProductOptions}
                    onChange={option => setFieldValue('product', option)}
                />
                <pre>{JSON.stringify(values, null, 2)}
)} )}
...