Tengo un json-server que contiene objetos { "id" : x , "name" : y }
el ejercicio es simple, llamar con una función asíncrona y cargar los datos, para ello también he realizado un formulario en un componente, en el cual escribes solo el nombre y se añade de forma asíncrona al json-server.
El problema es cuando una vez que he añadido el nuevo item al json-sever este no se visualiza en cliente hasta que realizo un refresh de la pagina... Mi idea era usar un useEffect
para provocar un renderizado en el componente que almacena la carga del servidor json-server de los datos.
Pero al pasar le dicho componente, este realiza llamadas infinitas al servidor reduciendo su eficiencia y haciendo llamadas innecesarias. Como podría solucionarlo ?
Main.js
import React, { useState, useEffect } from 'react';
import MainItem from './MainItem';
import Form from './Form';
function Main(){
const[customer,setCustomer] = useState([]);
async function loadData(){
const url = 'http://localhost:3004/personal';
const end = await fetch(url);
const json = await end.json();
return json;
}
useEffect(() => {
loadData().then(customer => {
setCustomer(customer);
})
},[])
//Si pasas por el useEffect customer, hace infinitas peticiones al servidor!!!
return(
<main>
<div className="main-container">
{customer.map(c => <MainItem id={c.id} name={c.name} key={c.id} />)}
</div>
<div className="main-container">
<Form />
</div>
</main>
);
}
export default Main;
MainItem.js
import React from 'react';
function MainItem({id,name}){
return(
<div className="item">{name}</div>
);
}
export default MainItem;
Form.js
import React, { useState } from 'react';
function Form(){
const[name,setName] = useState("");
const handleName = (e) => {
setName(e.target.value);
}
async function addName(){
const newItem = {id : Date.now(), name : name};
const url = 'http://localhost:3004/personal'; //URL
const end = await fetch(url, {method: 'POST', //End point a la URL
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newItem),
});
const json = await end.json(); // JSON format
return json;
}
function loadName(){
addName();
setName("");
}
return(
<form>
<input
type="text"
value={name}
onChange={e => handleName(e)}
placeholder="Name"
/>
<input type="button" onClick={loadName} value="Add" />
</form>
);
}
export default Form;
data.json
{
"personal": [
{
"id": 1,
"name": "Maria"
}
]
}
Si introduces el nombre en el formulario se actualiza en el server pero no se muestra en cliente hasta que no se refresca la pagina como podría hacerlo usando useEffect
?
He probado a introducir esto pero genera infinitas llamadas al server :
useEffect(() => {
loadData().then(customer => {
etCustomer(customer);
})
},[customer])