Не получает значение от loadOptions в реагировать на выбор / асинхронность - PullRequest
Новая
       3

Не получает значение от loadOptions в реагировать на выбор / асинхронность

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

Данные отлично выбираются с сервера. Но функция loadOption не загружает параметры для продукта. LoadItemCodeOption работает нормально. Ниже мой код: 

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

const [ mutation, { data, loading, error }] = useMutation(
    LOG_SAMPLE,
    {
        onCompleted({ logSample }) {
            console.log('LoggedSample', logSample)
            const { number } = logSample;
            history.push(`/sample/${number}`)
        }
    }
)
const { data: { currentUser } } = useQuery(GET_USERNAME)

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 => {
        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 ({value=0}) => {

    const response = await client.query({
        query: GET_ITEMCODE_SPECIFICATIONS,
        variables: { filter: {
            itemCode: 10000002
        }}
    })

    console.log('respo',response)

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


    return options

}

if(loading) return <p>Logging Sample...</p>
if(error) return <p>Error: {error}</p>

return(
    <Formik
       initialValues = {{
           itemCode: !!initialData ? {value: initialData.itemCode, label: initialData.itemCode} : '',
           product: !!initialData ? {value: initialData.product, label: initialData.product} : '',
       }}

       validationSchema = {Yup.object().shape({
           itemCode: Yup.number().required('Required'),
           product: 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 => setFieldValue('itemCode', option)}
                    shouldLoadMore={shouldLoadMore}
                />
                <ErrorMessage name="itemcode"/>
                <label htmlFor="product">Product</label>
                <AsyncSelect
                    name="product" 
                    //cacheOptions
                    value={values.product}

                    loadOptions={loadProductOptions(values.itemCode)}
                    onChange={option => setFieldValue('product', option)}
                />
            </Form>
        )}

    </Formik>
)
}
...