将数据传递给两个不同组件中的依赖选择字段的最佳方法

Question

很抱歉最近的所有问题，但我们的志愿者任务是在12月和我有很多工作要做，这些初步的问题将帮助我完成剩下的工作！

现在，我正在寻找填充select字段的最佳方法，该方法基于初始select字段之后的API响应。

在下面的图像中，我想要完成的是，一旦用户选择了一个Province，我希望将所选的prov_id传递给另一个组件，以便对我的MongoDB进行API调用，并根据选定的省份检索相关的区域。

这两种选择中的每一种都是独立的组件，因为我将在我正在构建的病人平台的其他表单中使用它们。

省 Select in displayProvinces.js

区 Select in displayDistricts.js

​

​

我确实有省选择工作，我可以调用地区API，而我把它们作为一个组件，但是现在我想把它们分成子组件，我正在寻找最好的方法将prov_id从displayProvinces.js传递到displayDistricts.js，这样我就可以调用API并填充区域选择选项。

含金量

import {React, useMemo} from 'react';
import GetProvincesAPI from '@/utils/services/GetProvincesAPI';
import {Field, useFormikContext } from 'formik';
import {useTranslation} from 'react-i18next';

export default function DisplayProvinces(props){
  
  const [ provinces ] = GetProvincesAPI();
  const {setFieldValue, errors, touched} = useFormikContext();
  const { t, i18n } = useTranslation();
  
  function handleSelectedProvince(pr){
    console.log('Fired')
    console.log('Selected Province = ' +pr)
    // Want to send 'pr' to displayDistricts.js in order to pull the appropriate Districts
  }
  
  return (
    <>
      <Field
        as="select"
        id="pxProvince"
        name="pxProvince"
        onChange={(e)=> {
          handleSelectedProvince(e.target.value)
          setFieldValue('pxProvince', e.target.value)
        }}
        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
      >
        {!provinces ? provinces : provinces.map((p, i) => (
          <option key={i} value={p.prov_id}>{p.prov_name}</option>
        ))}
      </Field>
      {props.onError &&
        <p className="mt-2 text-sm text-red-600" id="pxnum-error">
          {t('forms.rego.fields.px.provinceError')}
        </p>
      }
    </>
  )
}

displayDistricts.js含量

/* eslint-disable react-hooks/rules-of-hooks */
/* TODO: Fix the hook useProvinces inside the useMemo in order to have proper code */
import {Field, useFormikContext} from 'formik';
import GetDistrictsAPI from '@/utils/services/GetDistrictsAPI';
import {useMemo} from 'react';

export default function DisplayDistricts(props) {
  
  const {setFieldValue, values} = useFormikContext();
  const handleSelectedDistrict = useMemo(() => getDistricts(), []);
  
  let districts = [
    { id: '0', name: 'Select a Province first' }
  ]
  
  function getDistricts(d) {
    let districts = GetDistrictsAPI(d);
    console.log(districts)
  
    function handleSelectedDistrict(pr) {
      console.log('Selected District = ' +pr)
    }
  
    return handleSelectedDistrict;
  }
  
  return (
    <Field
      as="select"
      id="pxDistrict"
      name="pxDistrict"
      disabled={!values.pxProvince}
      className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
    >
      {!districts ? districts : districts.map((p, i) => (
        <option key={i} value={p.dist_id}>{p.name}</option>
      ))}
    </Field>
  )
}

提前感谢您的任何见解/想法！

Answer 1

尝试此解决方案，请检查注释：

主要部件

function Main() {
    const [province, setProvince] = useState({id: "" , name: ""});
    const [districts, setDistricts] = useState({});

\\ when select province you have id for other component 
console.log(province)
\\ so you can pass id DisplayDistricts component

    return (
        <>
            <DisplayProvinces callback={(e) => setProvince({id: e.id , name: i.name})} />
            <DisplayDistricts idProvince={province.id} callback={(e) => setDistricts({id: e.id , name: i.name})} />
        </>
    )
}

含金量

export default function DisplayProvinces(props){
  
  const [ provinces ] = GetProvincesAPI();
  const {setFieldValue, errors, touched} = useFormikContext();
  const { t, i18n } = useTranslation();
function handleSelectedProvince(name , id){
    console.log('Fired')
    console.log('Selected Province = ' +pr)
    props.callback({id: id , name:name})
    // Want to send 'pr' to displayDistricts.js in order to pull the appropriate Districts
  }
  
  return (
    <>
      <Field
        as="select"
        id="pxProvince"
        name="pxProvince"
        onChange={(e)=> {
          handleSelectedProvince(e.target.value , e.target[e.target.selectedIndex].id)
          setFieldValue('pxProvince', e.target.value)
        }}
        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
      >
        {!provinces ? provinces : provinces.map((p, i) => (
          <option key={i} id={p.prov_id} value={p.prov_name}>{p.prov_name}</option>
        ))}
      </Field>
      {props.onError &&
        <p className="mt-2 text-sm text-red-600" id="pxnum-error">
          {t('forms.rego.fields.px.provinceError')}
        </p>
      }
    </>
  )
}