Reactjs React Admin，基于第一个值的第二个输入过滤器

这是我第一次去那里，所以我希望我能说清楚

我正在使用React admin进行一个项目，我遇到了一个奇怪的问题。我正在使用一个模式，其中有两个字段，一个用于选择仓库（用于我的项目），另一个用于根据所选仓库解析位置。问题是，一旦选择了仓库，当我选择一个位置时，就会调用第二个查询，而不使用过滤器（但就在选择仓库之后，就会有一个好的查询）

示例：我选择“WHBOB”，查询正在过滤WHBOB，当我单击该位置时，第二个查询将不带过滤器地通过。我想，我正在使用的状态是重置过滤器，但我不知道如何修复它

代码：

import React, { useState } from 'react'

import { AutocompleteInput, ReferenceInput, SelectInput } from 'react-admin'
import { Box, Typography } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import ProductReceptionInputs from 'components/ProductReceptionInputs'

const useSmallBodyStyles = makeStyles(theme => ({
  root: {
    fontWeight: '600',
    color: theme.palette.secondary.contrastText
  }
})
)

const ProductLogisticInputs = (props) => {
  const classes = useSmallBodyStyles()

  const [selectedOption, setSelectedOption] = useState()

  function handleChange (evt) {
    setSelectedOption(evt.target.value)
  }

  return (
    <>
      <Typography variant='body2' color='secondary.contrastText' className={classes.root}>Atelier</Typography>

      <Box display='flex' width='100%'>
        <Box width='320px'>
          <SelectInput
            label='Atelier' source='warehouse'
            choices={[
              { id: 'WHBOB', name: 'Bobigny' },
              { id: 'WHLIL', name: 'Lille' },
              { id: 'WHLYO', name: 'Lyon' }
            ]} alwaysOn emptyText='Atelier' fullWidth
            InputProps={{ disableUnderline: true }}
            onChange={handleChange}
          />
        </Box>

        <Box width='320px' marginLeft='24px'>

          <ReferenceInput
            label='Emplacement'
            reference='location'
            source='location'
            filter={{ ancestor_path: selectedOption }}
            alwaysOn
          >
            <AutocompleteInput
              optionValue='id'
              optionText='name'
              options={{ disabled: !selectedOption }}
              fullWidth
            />
          </ReferenceInput>
        </Box>
      </Box>
      <Typography variant='body2' color='secondary.contrastText' className={classes.root}>Reception</Typography>
      <ProductReceptionInputs />
    </>
  )
}

export default ProductLogisticInputs

import React，{useState}来自“React”
从“react admin”导入{AutocompleteInput，ReferenceInput，SelectInput}
从“@material ui/core”导入{Box，排版}
从“@material ui/core/styles”导入{makeStyles}
从“组件/ProductReceptionInputs”导入ProductReceptionInputs
const useSallbodyStyles=makeStyles（主题=>({
根目录：{
重量：'600'，
颜色：theme.palette.secondary.Text
}
})
)
const productLogististInputs=（道具）=>{
常量类=使用SmallBodyStyles（）
const[selectedOption，setSelectedOption]=useState（）
功能手柄更改（evt）{
setSelectedOption（evt.target.value）
}
返回(
工作室
接待
)
}
导出默认ProductLogistitInputs

如果您需要更多信息，请随时询问

希望我说得很清楚：）

对于这种情况（链接2个选项），您应该使用

FormDataConsumer

。以下是文件：