React select loadOptions 在第二次渲染中没有被调用

Question

我有两个异步表单字段。根据第一个字段的选择，第二个字段通过 loadOptions 函数获取数据。我观察到，随着第一个字段中的输入更改，第二个字段的 loadOptions 不会重新执行。如何解决这个问题？

反应选择

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)}</pre>
            </Form>
        )}
        
    </Formik>
)
}

Answer 1

根据这个问题，你可以通过更新它来触发loadOptionsof ，我想你可以使用作为强制执行的密钥的一部分AsyncSelectkeyvalues.itemCode

<AsyncSelect
  key={`product-select-${values.itemCode}`}
  name="product"
  isDisabled={!productFilter}
  cacheOptions
  defaultOptions
  value={values.product}
  loadOptions={loadProductOptions}
  onChange={(option) => setFieldValue('product', option)}
/>;