@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
        });
    };
  • Вопрос задан
  • 1326 просмотров
Решения вопроса 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

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

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

Войти через центр авторизации
Похожие вопросы