javascript - React 当我从选择器中选择一些项目时,如何创建新数组?
问题描述
我想了几天,但无法意识到我该怎么做。我有 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
解决方案
https://codesandbox.io/s/mystifying-moore-7w105?file=/src/App.js
选择 CityTwo 以查看下拉列表更新。
你需要一个开关。更新状态内的数组很棘手。您不能在处于状态的数组中填充或推送任何内容。在状态之外更新您的数组,然后更新状态。
推荐阅读
- gradle - 在 intelij 2019.3.x 中指定 build.gradle 的替代方案
- python - 如何使用日期时间库访问月份?
- linux - 服务器上的其他用户无法打开 JupyterHub
- asp.net-core-mvc - 隐藏的输入字段提取不正确的数据
- gitlab - 安装:无法统计'/tmp/tmp.emBnEh/terraform-provider-snowflake':没有这样的文件或目录
- spring - 为没有任何基于浏览器的客户端的 Springboot 微服务启用 CSRF 并避免 403 错误
- python - Gurobi Python:如何在 MVar 上进行元素乘法?
- c++ - 在 C++ 中实现 GLFW Windows 时“无法实例化抽象类”
- java - 我对这个公式做错了吗
- c# - 即使我遵循了分发说明(据我所知),也无法让 CefSharp 在用户计算机上工作