#reactjs #api #flask #setstate
Вопрос:
Я разрабатываю приложение с React и серверной частью на основе Flask. В приложении я могу добавлять продукты или удалять их. И когда это происходит, новый продукт добавляется в базу данных или удаляется из нее.
Я хочу перезагрузить вызов api при добавлении продукта (ОПУБЛИКОВАТЬ), поэтому таблица, в которой я показываю эти продукты, содержит новый продукт. Прямо сейчас, когда я добавляю продукт, он добавляется в базу данных, но вызов api для получения продуктов выполняется снова.
Это код, в котором я отображаю таблицу и где создается api для хранения в базе данных:
import React, { useState, useEffect } from 'react';
import style from '../../style/Items';
import Grid from '@material-ui/core/Grid';
import Table from '../../components/Table';
import { getMyItems, getData, setData, getMyItems_transf } from '../../controller/Items';
import { deleteData, updateData, url_campo, url_transform, url_param } from '../../controller/Database';
import AlertPopOverParametros from '../../components/AlertPopOverParametros';
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
export function updateValues(producto_alerta, año_alerta, coef_transp, coef_comer, km, prod) {
console.log(typeof (producto_alerta), typeof (año_alerta), typeof (coef_transp), typeof (coef_comer), typeof (km), typeof (prod))
const Http = new XMLHttpRequest();
Http.open("POST", url_param);
Http.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
Http.setRequestHeader('Access-Control-Allow-Origin', '*');
Http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
Http.send(JSON.stringify({
"producto": "🍑 " producto_alerta,
"temporada": parseInt(año_alerta),
"produccion": parseInt(prod),
"coeficiente_transp": parseInt(coef_transp),
"kilometros": parseInt(km),
"coeficiente_comerc": parseInt(coef_comer)
}));
}
export function addProduct(prod, year) {
const Http = new XMLHttpRequest();
Http.open("POST", url_campo);
Http.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
Http.setRequestHeader('Access-Control-Allow-Origin', '*');
Http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
Http.send(JSON.stringify({
"conc_max_agua_n": 0,
"conc_max_agua_p": 0,
"consumo_n": 0,
"consumo_p": 0,
"cultivo": "🍑 " prod,
"cultivo_id": prod,
"etc": 0,
"eto_m3ha": 0,
"eto_mm": 0,
"kc": 0,
"pp_efectiva_año": 0,
"pp_efectiva_dia": 0,
"precipitacion": 0,
"produccion": 0,
"riego": 0,
"year": year
}));
}
export default function Items(props) {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [parametrosPopup, setParametrosPopup] = useState(false);
const [product, setProducto] = useState('');
const [year, setYear] = useState('');
useEffect(
() => {
if (isLoading) {
getData().then(
data => {
getMyItems(1).then(
items => {
setItems(items);
setData(data);
console.log(items)
setIsLoading(false);
}
)
})
}
}, [isLoading]
);
function showParamPopup() {
setParametrosPopup(true)
}
const itemsRepeated = {};
const unique = [];
console.log(items)
for (let i = 0; i < items.length; i ) {
const item = items[i];
if (!itemsRepeated[item.name]) {
itemsRepeated[item.id] = item.id_bbdd;
itemsRepeated[item.name] = item.name;
itemsRepeated[item.año] = item.año;
unique.push(item);
}
}
if (isLoading)
return null;
return (
<Grid container item md={12} style={style.root}>
<Grid container item md={12} style={style.root}>
<h2 style={style.h2}>Mis productos</h2>
<div style={style.table}>
<Table
columns={[
{
field: "name",
title: "Nombre del producto",
},
{
field: "año",
title: "Año"
}
]}
data={items}
editable={{
onRowAdd: newData => {
if (newData.name amp;amp; newData.año)
setItems(prev => [...prev, newData]);
setProducto(newData.name);
setYear(newData.año);
showParamPopup();
addProduct(newData.name, newData.año);
return Promise.resolve();
},
onRowUpdate: (newData, oldData) => {
updateData(newData)
window.location.reload()
setItems(prev => {
const newItems = [];
prev.forEach(item => {
if (item.id !== newData.id) {
newItems.push(item)
} else {
newItems.push(newData);
}
})
return [...newItems];
});
return Promise.resolve();
},
onRowDelete: oldData => {
deleteData(oldData)
var a = [];
const Http = new XMLHttpRequest();
Http.open("GET", url_campo);
Http.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
Http.setRequestHeader('Access-Control-Allow-Origin', '*');
Http.send();
Http.onreadystatechange = async function () {
if (Http.readyState == 4 amp;amp; Http.status == 201) { //la petición se realiza varias veces. Ejecucion de lectura cuando estado sea 201 (correcto)
if (Http.responseText) {
var response = (JSON.parse(Http.responseText)['data'])
for (var key in response) {
a.push({
id: response[key]['cultivo_id'],
name: response[key]['cultivo'],
id_bbdd: response[key]['id'],
año: response[key]['year'],
conc_max_agua_n: response[key]['conc_max_agua_n'],
conc_max_agua_p: response[key]['conc_max_agua_p'],
consumo_n: response[key]['consumo_n'],
consumo_p: response[key]['consumo_p'],
etc: response[key]['etc'],
eto_m3ha: response[key]['eto_m3ha'],
eto_mm: response[key]['eto_mm'],
kc: [key]['kc'],
pp_efectiva_año: response[key]['pp_efectiva_año'],
pp_efectiva_dia: response[key]['pp_efectiva_dia'],
precipitacion: response[key]['precipitacion'],
produccion: response[key]['produccion'],
riego: response[key]['riego'],
})
}
console.log('a', a)
}
}
await sleep(1000)
setItems(a)
}
return Promise.resolve();
}
}}
/>
</div>
</Grid>
<Grid>
<AlertPopOverParametros
open={parametrosPopup}
setOpen={setParametrosPopup}
onAccept={() => { console.log('holapupup') }}
producto={product}
año={year}
/>
</Grid>
</Grid>
);
}
Это код, в котором переменные элементы из предыдущего кода зависят от:
import { convertDateFromString } from './Date';
import { sleep, url_campo, url_param, url_transform } from './Database';
export function getMyItems(companyId) {
console.log(Promise.resolve(mock))
return Promise.resolve(mock);
}
export function getMyItems_transf(companyId) {
return Promise.resolve(mock_transf);
}
export function getData(companyId) {
return Promise.resolve(companyData);
}
export function setData(newData) {
companyData = newData
}
export function getParameters(){
return Promise.resolve(parameters)
}
export function getConfiguration(companyId) {
return Promise.resolve(configuration);
}
export function setConfiguration(newData) {
configuration = newData
}
export function getSeasons(companyId) {
return Promise.resolve(seasons);
}
export function getProcess(companyId) {
return Promise.resolve(process);
}
export function filterDataBySeason(season) {
if (season) {
const filterData = [];
companyData.forEach(data => {
filterData.push({
...data,
data: data.data.filter(d => d.id !== season)
});
});
return filterData;
} else
return companyData;
}
var parameters = (async function () {
var a = [];
const Http = new XMLHttpRequest();
Http.open("GET", url_param);
Http.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
Http.setRequestHeader('Access-Control-Allow-Origin', '*');
Http.send();
Http.onreadystatechange = async function () {
if (Http.readyState == 4 amp;amp; Http.status == 201) {
if (Http.responseText) {
var response = (JSON.parse(Http.responseText)['data'])
console.log(response)
for (var key in response) {
a.push({
coeficiente_comerc: response[key]['coeficiente_comerc'],
coeficiente_transp: response[key]['coeficiente_transp'],
kilometros: response[key]['kilometros'],
produccion: response[key]['produccion'],
temporada: response[key]['temporada'],
producto: response[key]['producto'].normalize("NFD").replace(/[u0300-u036f]/g, ""),
})
}
console.log('a', a)
}
}
}
await sleep(1000)
return a
})();
var mock = (async function () {
var a = [];
const Http = new XMLHttpRequest();
Http.open("GET", url_campo);
Http.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
Http.setRequestHeader('Access-Control-Allow-Origin', '*');
Http.send();
Http.onreadystatechange = async function () {
if (Http.readyState == 4 amp;amp; Http.status == 201) {
console.log('STATUS ', Http.readyState " " Http.status)
if (Http.responseText) {
var response = (JSON.parse(Http.responseText)['data'])
for (var key in response) {
a.push({
id: response[key]['cultivo_id'],
name: response[key]['cultivo'].normalize("NFD").replace(/[u0300-u036f]/g, ""),
id_bbdd: response[key]['id'],
año: response[key]['year'],
conc_max_agua_n: response[key]['conc_max_agua_n'],
conc_max_agua_p: response[key]['conc_max_agua_p'],
consumo_n: response[key]['consumo_n'],
consumo_p: response[key]['consumo_p'],
etc: response[key]['etc'],
eto_m3ha: response[key]['eto_m3ha'],
eto_mm: response[key]['eto_mm'],
kc: [key]['kc'],
pp_efectiva_año: response[key]['pp_efectiva_año'],
pp_efectiva_dia: response[key]['pp_efectiva_dia'],
precipitacion: response[key]['precipitacion'],
produccion: response[key]['produccion'],
riego: response[key]['riego'],
})
}
console.log('a', a)
}
}
}
await sleep(1000)
return a
})();
var mock_transf = (async function () {
var a = [];
const Http = new XMLHttpRequest();
Http.open("GET", url_transform);
Http.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
Http.setRequestHeader('Access-Control-Allow-Origin', '*');
Http.send();
Http.onreadystatechange = async function () {
if (Http.readyState == 4 amp;amp; Http.status == 201) {
if (Http.responseText) {
var response = (JSON.parse(Http.responseText)['data'])
for (var key in response) {
a.push({
acumulado_caudal_fase_1: response[key]['acumulado_caudal_fase_1'],
caumulado_caudal_fase_2: response[key]['acumulado_caudal_fase_2'],
acumulado_caudal_fase_3: response[key]['acumulado_caudal_fase_3'],
calibrado: response[key]['calibrado'],
caudal_rechazo_osmosis: response[key]['caudal_rechazo_osmosis'],
caudal_vertido: response[key]['caudal_vertido'],
cultivo: response[key]['cultivo'].normalize("NFD").replace(/[u0300-u036f]/g, ""),
dia: response[key]['dia'],
entrada_pozo: response[key]['entrada_pozo'],
entrada_red: response[key]['entrada_red'],
esterilizacion: response[key]['esterilizacion'],
evaporador: response[key]['evaporador'],
id_bbdd: response[key]['id'],
lavado_1: response[key]['lavado_1'],
lavado_2: response[key]['lavado_2'],
limpieza: response[key]['limpieza'],
liquido_gobierno: response[key]['liquido_gobierno'],
partido: response[key]['partido'],
pelado: response[key]['pelado'],
produccion: response[key]['produccion'],
temporada: response[key]['temporada'],
total_consumo: response[key]['total_consumo'],
})
}
}
}
}
await sleep(1000)
return a
})();
/**
* filterDataBySeasonAndProduct
*
* @param season Object
* @param product Object
*
* @return Object
*/
export function filterDataBySeasonAndProduct(season, product) {
return Promise.resolve(getData().then(function (data) {
/** @var result Array */
var result = []
// Search for my product
Object.keys(data).forEach(function (product_id) {
if (product.id == data[product_id].product) {
Object.keys(data[product_id].data).forEach(function (item_id) {
if (data[product_id].data[item_id].season_name == season.name) {
result.push(data[product_id].data[item_id])
}
})
}
})
return result.length ? result[0] : {}
}))
}
export function filterDataByDate(startDate, endDate) {
if (startDate amp;amp; endDate) {
const filterData = [];
companyData.forEach(data => {
filterData.push({
...data,
data: data.data.filter(d => {
const dataStartDate = convertDateFromString(d.start_date);
const dataEndDate = convertDateFromString(d.end_date);
const startDate_ = convertDateFromString(startDate);
const endDate_ = convertDateFromString(endDate);
console.log("-----ItemsControllerFilterDataByDate-----");
console.log(dataEndDate);
console.log(endDate_);
console.log("------------");
return dataStartDate >= startDate_ amp;amp; dataEndDate <= endDate_
})
});
});
return filterData;
} else
return companyData;
}
const year = new Date().getFullYear() - 2000 1 //año actual 2021 - 2000 1 = 22
function filterArray(inputArr) {
var found = {};
var out = inputArr.filter(function (element) {
return found.hasOwnProperty(element) ? false : (found[element] = true);
});
return out;
}
export const seasons = (async function () {
var b = [];
var years = []
const Http = new XMLHttpRequest();
Http.open("GET", url_campo);
Http.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
Http.setRequestHeader('Access-Control-Allow-Origin', '*');
Http.send();
Http.onreadystatechange = async function () {
if (Http.readyState == 4 amp;amp; Http.status == 201) { //la petición se realiza varias veces. Ejecucion de lectura cuando estado sea 201 (correcto)
console.log('STATUS ', Http.readyState " " Http.status)
if (Http.responseText) {
var response = (JSON.parse(Http.responseText)['data'])
console.log(response)
//MODIFICAR CON LA ESTRUCTURA DE LA BBDD
for (var key in response) {
b.push(
response[key]['year'].toString()
)
}
const unique_years = filterArray(b)
unique_years.sort(function (a, b) { return a - b; });
var year_id = 1
for (var key in unique_years) {
years.push({
id: year_id,
name: unique_years[key]
})
year_id = 1;
}
console.log(years)
console.log('b', b)
}
}
}
await sleep(1000)
return years
})();
/* export const seasons = [
{
id: 1,
name: "2018",
},
{
id: 2,
name: "2019",
},
{
id: 3,
name: "2020",
},
{
id: 4,
name: "2021",
}
]; */
console.log(seasons)
/** @var process */
const process = [
{
id: 1,
name: "🧹 Limpieza",
},
{
id: 2,
name: "✂️ Pelado",
},
{
id: 3,
name: "☁️ Evaporación",
},
{
id: 4,
name: "🚿 Esterilización"
},
{
id: 5,
name: "🛠️ Calibración"
},
];
/** @var configuration Object */
let configuration = []
// Hidrate configuration for all products and seasons with
// random numbers
Object.keys(seasons).forEach(function (season) {
Object.keys(mock).forEach(function (product) {
configuration.push({
type: 'agriculture',
product: mock[product].id,
season: seasons[season].id,
value: Math.floor(Math.random() * 1000) 1,
real: true
})
})
})
Object.keys(seasons).forEach(function (season) {
Object.keys(mock).forEach(function (product) {
configuration.push({
type: 'transport',
product: mock[product].id,
season: seasons[season].id,
kilometers: Math.floor(Math.random() * 4000) 1,
coefficient: (Math.random() * 2) 1,
})
})
})
Object.keys(seasons).forEach(function (season) {
Object.keys(mock).forEach(function (product) {
configuration.push({
type: 'commercialization',
product: mock[product].id,
season: seasons[season].id,
production: Math.floor(Math.random() * 500) 1,
coefficient: (Math.random() * 2) 1,
})
})
})
Object.keys(seasons).forEach(function (season) {
Object.keys(mock).forEach(function (product) {
configuration.push({
type: 'transform',
product: mock[product].id,
season: seasons[season].id,
production: Math.floor(Math.random() * 500) 1,
value: (Math.random() * 2) 1,
})
})
})
/**
* filterConfiguration
*
* From a filter this function is allow to retrieve a
* configuration
*
* @param filters Object
*
* @return Object
*/
export function filterConfiguration(filters) {
// Check parameters
if (!filters) {
return ''
}
/** @const items Array */
const items = configuration.filter(function (item) {
for (var filter in filters) {
if (item[filter] === undefined || item[filter] != filters[filter]) {
return false;
}
}
return true;
});
console.log(items)
// Return object
return items ? items[0] : {}
}
// Ordenado por temporadas
let companyData = [
{
name: '🍑 Tomate',
product: 'tomato',
data: [
{
id: 1,
season_name: "2018",
total: 248432,
water_footprint: 4442540,
carbon_footprint: 524043,
start_date: new Date(2018, 6, 14),
end_date: new Date(2018, 6, 30),
commentary: "Tomatico 2018"
},
{
id: 2,
season_name: "2019",
total: 247550,
water_footprint: 4335060,
carbon_footprint: 325220,
start_date: new Date(2019, 6, 14),
end_date: new Date(2019, 6, 30),
commentary: ""
},
{
id: 3,
season_name: "2020",
total: 258230,
water_footprint: 4102800,
carbon_footprint: 333000,
start_date: new Date(2020, 6, 14),
end_date: new Date(2020, 6, 30),
commentary: "Tomatico 2020"
},
]
},
{
name: '🍑 Melocotón',
product: 'peach',
data: [
{
id: 1,
season_name: "2018",
total: 248432,
water_footprint: 4380800,
carbon_footprint: 594043,
start_date: new Date(2018, 6, 14),
end_date: new Date(2018, 6, 30),
commentary: "Melocotón 2018"
},
{
id: 2,
season_name: "2019",
total: 247550,
water_footprint: 4290800,
carbon_footprint: 215220,
start_date: new Date(2019, 6, 14),
end_date: new Date(2019, 6, 30),
commentary: "Melocotón 2019"
},
{
id: 3,
season_name: "2020",
total: 258230,
water_footprint: 4102800,
carbon_footprint: 203200,
start_date: new Date(2020, 6, 14),
end_date: new Date(2020, 6, 30),
commentary: ""
},
]
}
]
Я пытался вызвать getMyItems в onRowAdd, но это не работает.
Я умеренно новичок в реагировании, поэтому я думаю, что есть какая-то концепция, которой мне не хватает.
Как я могу перезагрузить фиктивную переменную, полученную в результате вызова api?
Огромное спасибо.