@DimaSBB

При post запросе данные отображаются только после перезагрузки страницы (React). Как исправить?

В общем делаю post запрос на добавление (функция addTask). Есть функция (getAllTasks) которая делает get запрос на отображение данных на этой же странице. Проблема в том что данные появляются только после обновления страницы. пробовал в useEffect делать отслеживание на изменение tasks но тогда запускается бесконечная цепочка get запросов. В общем как исправить?

Код:
const [title, setTitle] = useState("");
    const [tasks, setTasks] = useState(null);
    const allTextLang = LangService.key().allText;
    const maxSize = 50;

    const handleChangeField = (event) => {
        const value = event.target.value;
        setTitle(prevValue => InputValidator(prevValue, value, maxSize));
    };

    useEffect(() => {
        getAllTasks(); 
    }, []);

    const getAllTasks = async () => {
        const responce = await API.get("/tasks");       
        setTasks(responce.data);
    };

    const addTask = (event) => {
        event.preventDefault();

        API.post("/tasks", {
            title: title
        });
    };
  • Вопрос задан
  • 1478 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy
Верставший фронтендер
Ну у вас тут 2 варианта.

1) После addTask вызывать getAllTasks (2 запроса, но максимально актуальные данные)
2) в addTask делать не только post на сервер, но ещё и обновлять стэйт. (лучше конечно разделить на 2 функции, чтобы не нарушать принцип единственной ответственности)
то есть:
const addTask = async (event) => {
        event.preventDefault();

        await API.post("/tasks", {
            title: title
        });

        setTasks([...tasks, { title: title }])
    };


Однако, тут стоит учесть, что если Post запрос не пройдёт, а вы обновите стэйт, то данные будут не актуальные у пользователя. Таким образом, если ваше API.post возвращает промис, то стоит обновлять стэйт в .then(). Ну или через await

Дальше уже смотрите по ситуации что Вам больше подойдёт.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект