显示即将到来的 Select 选项与先前 Selected Select 字段的逻辑

Question

我正在从 api 接收数据，就像嵌套到状态对象中的引用一样

示例：

const data = [
  {
    id: 1,
    name: 'State One',
    cities: [
      {
        id: 1,
        state: 'State One',
        name: 'City One'
      },
      {
        id: 2,
        state: 'State One',
        name: 'City Two'
      },
      {
        id: 3,
        state: 'State One',
        name: 'City Three'
      }
    ]
  },
  {
    id: 2,
    name: 'State 2',
    cities: [
      {
        id: 4,
        state: 'State 2',
        name: 'City 5'
      }
    ]
  }
]

我必须根据父州给出城市的 Select 选项。假设用户在州 Select 字段中选择了 State One，那么下一个城市字段中应该只有 State One 的城市选项如何配置？

目前；我已经创建了 Select 输入字段的空心结构，但找不到任何内容，我该如何配置它。我需要很少的帮助或任何想法来开始。

这是当前代码；

<Col lg="6" md="12" className="mb-1">
<Label className="form-label  py-1" for="state">
    State
</Label>{' '}
<Row></Row>
<Select
    id="state"
    options={stateOptions}
    defaultValue={stateOptions[0]}
    onChange={(choice) => console.log(choice.value)}
/>
</Col>
<Col lg="6" md="12" className="mb-1">
<Label className="form-label  py-1" for="city">
    City
</Label>{' '}
<Row></Row>
<Select
    id="city"
    classNamePrefix="select"
    options={cityOptions}
    onChange={(choice) => console.log(choice.value)}
/>
</Col>

我看过一些文章，但他们建议使用 npm 库，但我不能使用它们，因为数据与我想要处理的数据有很大不同。

Answer 1

您可以跟踪当前选择的州并更新第二个 Select 所在的城市。

还添加了一些注释来解释函数的作用。

export default function App() {
  const [state, setState] = useState(null);
  const [city, setCity] = useState(null);

  const onStateChange = (option) => {
    setState(option);

    // to remove city if a different state is selected
    if (!option || option?.value !== state?.value) setCity(null);
  };

  const onCityChange = (option) => {
    setCity(option);
  };

  // a separate useState for cities is not needed
  // as cities depend on the selected state, it can be determined when state changes
  const cities = useMemo(() => {
    if (!state) return [];
    return getOptions(data.find((el) => el.id === state.value).cities);
  }, [state]);

  return (
    <div>
      <Select options={states} value={state} onChange={onStateChange} />
      <hr />
      <Select options={cities} value={city} onChange={onCityChange} />
    </div>
  );
}

显示即将到来的 Select 选项与先前 Selected Select 字段的逻辑

Showing Upcoming Select Options with logic to Previous Selected Select Field

javascript

reactjs

react-select