Reactjs 在第二次渲染中未调用React select loadOptions

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

反应选择

import React，{useState，useffect}来自“React”
从“react router dom”导入{useHistory}
从'react apollo'导入{UseAppolloClient}；
从“Formik”导入{Formik，Form，ErrorMessage}；
从“Yup”导入*作为Yup；
从“反应选择/异步”导入异步选择
从“反应选择异步分页”导入异步分页
从“../../library/Query”导入{GET_ITEM_CODES，GET_ITEMCODE_SPECIFICATIONS}；
导出默认函数SampleForm（{initialData}）{
const history=useHistory（）；
常量[productFilter，setProductFilter]=useState（“”）；
const client=useAppolloClient（）；
常量默认值附加={
游标：空
}
const shouldLoadMore=（scrollHeight、clientHeight、scrollTop）=>{
const bottomBorder=（滚动高度-clientHeight）/2
返回底部边框<滚动顶部
}
const loadItemcodeOptions=async（q=0，prevOptions，{cursor}）=>{
console.log（'qu'，q*1）
常量选项=[]；
console.log（'load'））
const response=wait client.query({
查询：获取商品代码，
变量：{筛选器：{
编号：q*1
}，跳过：0，第一个：4，之后：游标}
})
console.log（'res'，响应）
response.data.itemCodes.itemCodes.map（item=>{
返回选项。推送({
值：item.number，
标签：`${item.number}${item.description}`
})
})
console.log（'0'，选项）
返回{
选项，
hasMore:response.data.itemCodes.hasMore，
其他：{
游标：response.data.itemCodes.cursor.toString（）
}
}
}
const loadProductOptions=async（productFilter）=>{
console.log（'x'，productFilter）
如果（！！productFilter）{
console.log（'if'，！productFilter）
const response=wait client.query({
查询：获取\u ITEMCODE\u规范，
变量：{筛选器：{
项目代码：productFilter
}}
})
console.log（'respo'，response.data）
常量选项=[]；
response.data.itemCodeSpecifications.map（item=>{
返回选项。推送({
价值：项目。产品，
标签：`${item.product}`
})
})
console.log（选项）
返回选项
}否则{
console.log（'else'）
返回[]
}
}
常数handleFilter=（e）=>{
console.log（'e'，e）
setProductFilter（例如值）
console.log（'pf'，productFilter）
}
useffect（（）=>{
console.log（'epf'，productFilter）
})
console.log（'rpf'，productFilter）
返回(
{（{values，isSubmitting，setFieldValue，toucted，errors}）=>(
项目代码
{
手滤器（选件）
setFieldValue（'itemCode'，选项）
}}
shouldLoadMore={shouldLoadMore}
/>
重新加载程序{productFilter}
setFieldValue（'产品'，选项）}
/>
{JSON.stringify（值，null，2）}
)}
)
}

根据这一点，您可以通过更新其

键来触发
异步选择的
加载选项
，我想您可以使用
值.itemCode
作为键的一部分来强制执行

setFieldValue（'product'，option）}
/>;
您找到这个问题的解决方案了吗？
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>
)
}