Я изучаю React за несколько дней и пытаюсь изучить Axios. Все работало нормально, пока я не попытался вставить данные, которые я успешно вставил, но моя страница React не сразу обновила список контактов.
ЗДЕСЬ МОЙ КОД:
App.js
import Axios from "axios";
import React, { useEffect, useState } from "react";
import Add__Contact from "./api/Add__Contact";
const App = () => {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [contacts, setContacts] = useState([]);
const url = "http://localhost:3006/contacts";
//get all availbale contacts
useEffect(() => {
// get all contacts async
async function getUsers() {
Axios.get(url).then((response) => {
setContacts(response.data);
});
}
getUsers();
console.info(contacts);
// get all contacts non-async
// Axios.get(url).then((response) => {
// setContacts(response.data);
// });
}, []);
//add new contact to server
const addContact = () => {
const saveRes = Add__Contact({ name, phone });
};
// view
return (
<div>
<h4>Add contact</h4>
<div>
<input type = "text" name = "name" value = {name} onChange = {(e) => setName(e.target.value)} placeholder = "name here" />
<br />
<br />
<input
type = "text"
name = "phone"
value = {phone}
onChange = {(e) => setPhone(e.target.value)}
placeholder = "Phone here"
/>
<br />
<br />
<button onClick = {addContact}>Add to Contact</button>
</div>
<hr />
<h4>List of Contacts</h4>
<div>
{contacts.map((contact) => {
return (
<div key = {contact.id}>
<span>{contact.name} : </span>
<span> {contact.phone}</span>
</div>
);
})}
</div>
</div>
);
};
export default App;
Add__Contact.js
import Axios from "axios";
const Add__Contact = async ({ name, phone }) => {
Axios({
method: "post",
url: "http://localhost:3006/contacts",
headers: {
"Content-Type": "application/json",
},
data: {
name,
phone,
},
}).then(function (res) {
// console.info(res);
});
};
export default Add__Contact;
db.json
{
"contacts": [
{
"name": "Max",
"phone": "123456",
"id": 1
},
{
"name": "John",
"phone": "13454",
"id": 2
},
{
"name": "Candy",
"phone": "1245781245",
"id": 3
}
]
}
Я не уверен, почему он не обновляет список автоматически, я думал, что useEffect
будет запускаться каждый раз, когда я нажимаю и звоню Add__Contact()
. Подскажите, пожалуйста, что я пропустил или делаю не так?
Я не уверен, подходит ли крючок useEffect
для того, чего я хочу достичь, или нет, поэтому, пожалуйста, помогите мне. Заранее спасибо.
вставка данных работает нормально, но после того, как я ее вставлю, она не обновляет пользовательский интерфейс, даже если я извлекаю данные внутри useEffect
Ваш useEffect
хук запускается только один раз — при монтировании компонента. Это потому, что вы дали ему пустой массив зависимостей (2-й аргумент).
Массив зависимостей определяет, когда будет выполняться функция эффекта. Если он пуст, он будет работать только тогда, когда компонент смонтирован (отображается в первый раз). Если вы добавите что-то в массив, эффект будет работать при монтировании и при изменении предоставленного значения.
В вашем случае у вас есть событие (событие нажатия кнопки «Добавить в контакты»), после которого вы хотите, чтобы ваши данные снова были получены. Но вы также хотите получать данные при загрузке страницы.
Один из способов сделать это примерно так:
const Add__Contact = async ({ name, phone }) => {
// Return the Promise returned from the Axios call
return Axios({
method: "post",
url: "http://localhost:3006/contacts",
headers: {
"Content-Type": "application/json",
},
data: {
name,
phone,
},
});
};
const App = () => {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [contacts, setContacts] = useState([]);
const url = "http://localhost:3006/contacts";
// Add a function to fetch contacts
const fetchContacts = async () => {
const res = await Axios.get(url);
setContacts(res.data);
};
// Effect that fetches contacts when the component loads
useEffect(() => {
fetchContacts();
}, []);
//add new contact to server
const addContact = async () => {
// await the Promise returned
const saveRes = await Add__Contact({ name, phone });
// Fetch the contacts list again
await fetchContacts();
};
// view
return (
<div>
<h4>Add contact</h4>
<div>
<input type = "text" name = "name" value = {name} onChange = {(e) => setName(e.target.value)} placeholder = "name here" />
<br />
<br />
<input
type = "text"
name = "phone"
value = {phone}
onChange = {(e) => setPhone(e.target.value)}
placeholder = "Phone here"
/>
<br />
<br />
<button onClick = {addContact}>Add to Contact</button>
</div>
<hr />
<h4>List of Contacts</h4>
<div>
{contacts.map((contact) => {
return (
<div key = {contact.id}>
<span>{contact.name} : </span>
<span> {contact.phone}</span>
</div>
);
})}
</div>
</div>
);
};
Таким образом, ваш массив контактов не обновляется. Даже вы получили данные от вызова axios.
Например, если axios возвращает данные, то я думаю, что ваше состояние не обновляется, тогда вам нужно использовать
setContacts((prv)=>[...prv,...res.data])
Если вы столкнулись с проблемой при добавлении времени . Затем создайте отдельную функцию, а затем используйте ее в useEffect() && your ADD_Contact() .
const App = () => {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [contacts, setContacts] = useState([]);
const getContacts = async () => {
const res = await Axios.get('http://localhost:3006/contacts');
setContacts(res.data);
};
useEffect(() => {
getContacts();
}, []);
const addContact = async () => {
const saveRes = await Add__Contact({ name, phone });
await getContacts();
};
return (
<div>
<h4>Add contact</h4>
<div>
<input type = "text" name = "name" value = {name} onChange = {(e) => setName(e.target.value)} placeholder = "name here" />
<br />
<br />
<input
type = "text"
name = "phone"
value = {phone}
onChange = {(e) => setPhone(e.target.value)}
placeholder = "Phone here"
/>
<br />
<br />
<button onClick = {addContact}>Add to Contact</button>
</div>
<hr />
<h4>List of Contacts</h4>
<div>
{contacts.map((contact) => {
return (
<div key = {contact.id}>
<span>{contact.name} : </span>
<span> {contact.phone}</span>
</div>
);
})}
</div>
</div>
);
};
if i use setContacts((prv)=>[...prv,...res.data])
it is updating but showing Two times entries, like: ``Max : 123456 John : 13454 Candy : 1245781245 jits : 56858745 kish : 12313 abcd : 546546 123 : 21313 dsfdfd : 454353 gfdgdfg : 564645 Max : 123456 John : 13454 Candy: 1245781245 jits: 56858745 kish: 12313 abcd: 546546 123: 21313 dsfdfd: 454353 gfdgdfg: 564645
также ранее, если я обновлял, все контакты показывались, но не автоматически (без обновления), мне приходилось обновлять вручную, чтобы увидеть последний список.
setContacts((prv)=>[...res.data]) Не могли бы вы проверить, используя этот способ
Случай обновления вручную произошел, потому что вам нужно обновить свое состояние, когда вы добавляете что-то новое. вам нужно снова вызвать метод, чтобы получить свежие данные.
setContacts((prv)=>[...res.data])
тоже не работает. Код @ali Nauman (трюк) сработал
Это сработало как шарм, призывая
fetchData()
сделать свое дело.