React 当我从选择器中选择一些项目时，如何创建新数组？

Question

我想了几天，但无法意识到我该怎么做。我有 4 个 json 数据和 4 个选择器。 它适用于城市，地区，村庄，邻里。首先我必须选择城市，然后在第二个选择器中它必须显示我选择城市的地区。当我从第三个选择器中选择区域时，必须向村庄展示该区域。 neirborhood 也一样。在那个 json 数据中，它们有一些联系。像城市json有'id-name'区有'id-cityid-name'村庄有'id-districtid-name'neirborhood有'id-villageid-name'这样。但我不知道我该怎么做。它是我的代码，我真的很坚持，我几乎不需要一些帮助。谢谢！我的代码：

元素：

const DropdownElements = [
  {
    key: 1,
    title: "Şehir",
    placeholder: "Şehir Seçiniz",
    apiUrl: "https://api.npoint.io/995de746afde6410e3bd",
    type: "city",
    selecteditem: "",
    data : [],
  },
  {
    key: 2,
    title: "İlçe",
    placeholder: "İlçe Seçiniz",
    apiUrl: "https://api.npoint.io/fc801dbd3fc23c2c1679", 
    type: "district",
    selecteditem: "",
    data : [],
  },

  {
    key: 3,
    title: "Köy",
    placeholder: "Köy Seçiniz",
    apiUrl: "https://api.npoint.io/72cf025083b70615b8bb",
    type: "village",
    selecteditem: "",
    data : [],
  },
  {
    key: 4,
    title: 'Mahalle',
    placeholder:'Mahalle Seçiniz',
    apiUrl: 'https://api.npoint.io/0c04c63923c8ca4e117b',
    type: 'neighborhood',
  selecteditem: "",
    data : [],
  },


];

组件：

    const PickerCompanent = (props) => {
  const [xdata, setData] = useState([]);
  const [newData, setNewData] = useState([]);
  let x;
  let y = [];
  // data.filter((a) => a.il_id == "3");
  useEffect(() => {
    props.datasource.then(setData);

    switch (props.type) {
      case "city":
        x = props.selecteditem;
        setNewData(xdata);
        break;
      case "district":
        y = xdata.filter((element) => {
          if (props.selecteditem === element.id) {
            return element;
          }
        });

        break;
      case "village":
        console.log("village");
        break;
      default:
        console.log("def");
        break;
    }
  }, [props.datasource]);

  return (
    <Select
      showSearch
      style={{ width: 200, marginLeft: 15 }}
      placeholder={props.placeholder}
      optionFilterProp="children"
      onChange={(x) => props.onChange(x)}
      onFocus={props.onFocus()}
      datasource={xdata}
      onSearch={props.onSearch()}
      filterOption={(input, option) =>
        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    >
      {xdata &&
        xdata.map((x) => {
          return (
            <Select.Option key={x.id} value={x.id}>
              {x.name}{" "}
            </Select.Option>
          );
        })}
    </Select>
  );
};

我的应用：

const App = () => {
  const [dataap, setDataAp] = useState([]);
  const [idhold, setIDHold] = useState();

  const filldata = (value) => {};

  function onChange(value) {
    setIDHold(value);
    console.log(value);
  }

  const getData = (value, type) => {
    return fetch(value)
      .then((x) => x.json())
      .then((y) => {
        return y;
      });
  };

  function onFocus() {}

  function onSearch(val) {}

  return (
    <Space>
      {DropdownElements.map((x) => {
        return (
          <PickerCompanent
            showSearch
            selecteditem={idhold}
            key={x.key}
            placeholder={x.placeholder}
            type={x.type}
            datasource={getData(x.apiUrl)}
            onFocus={onFocus}
            onChange={(z) => onChange(z)}
            onFocus={onFocus}
            onSearch={onSearch}
          ></PickerCompanent>
        );
      })}
    </Space>
  );
};

如果您需要，我也可以给我的 teamviewer 或 skype。我真的需要帮助谢谢你的回复！

沙盒：codesandbox.io/s/runtime-monad-vxit

Answer 1

https://codesandbox.io/s/mystifying-moore-7w105?file=/src/App.js

选择 CityTwo 以查看下拉列表更新。

你需要一个开关。更新状态内的数组很棘手。您不能在处于状态的数组中填充或推送任何内容。在状态之外更新您的数组，然后更新状态。