Невозможно отобразить дочерние элементы (пакеты), содержащие тот же dev_address, что и выбранный родительский элемент (устройство) в React.js
(скриншоты смотрите ниже)
У меня есть реляционная БД, где каждый пакет принадлежит только одному устройству (через внешний ключ dev_address), а устройство может иметь много пакетов (many-to-one rel). Я пытался отобразить пакеты, принадлежащие выбранному устройству, которое находится в сопоставленном списке, но тщетно...
Я использую контекст для загрузки пакетов и устройств из API. Стек - React-Django-MySQL.
<import React from "react";
import GlobalContext from "./GlobalContext";
const AppContext = (props) => {
const [modules, setModules] = React.useState([]);
const [devices, setDevices] = React.useState([]);
const [packets, setPackets] = React.useState([]);
const [fields, setFields] = React.useState([]);
React.useEffect(() => {
Promise.all([
fetch("http://localhost:8000/api/v1/modules")
.then((res) => res.json())
.then((json) => {
setModules(json);
}),
fetch("http://localhost:8000/api/v1/devices")
.then((res) => res.json())
.then((json) => {
setDevices(json);
}),
fetch("http://localhost:8000/api/v1/packets")
.then((res) => res.json())
.then((json) => {
setPackets(json);
}),
fetch("http://localhost:8000/api/v1/fields")
.then((res) => res.json())
.then((json) => {
setFields(json);
}),
]);
}, []);
return (
<GlobalContext.Provider
value={{
modules,
devices,
packets,
fields,
}}
>
{props.children}
</GlobalContext.Provider>
);
};
export default AppContext;
