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

    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

    Дальше уже смотрите по ситуации что Вам больше подойдёт.
    Ответ написан
    Комментировать
  • Валидация input (возвращает в строку false). Как исправить?

    0xD34F
    @0xD34F Куратор тега React
    Пусть валидатор возвращает true/false вместо корректное_значение/false:

    const validator = (value, maxSize) =>
      !(/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize);

    Соответственно, setTitle вызывайте только в случае true:

    if (validator(value, maxSize)) {
      setTitle(value);
    }

    Если же вам всё-таки необходимо, чтобы валидатор возвращал значение инпута, то он должен получать не только то, которое проверяет, но и какое-то дефолтное корректное, чтобы было что вернуть в случае отрицательного результата проверки:

    const validator = (defaultValue, value, maxSize) =>
      (/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize)
        ? defaultValue
        : value;

    setTitle(prevValue => validator(prevValue, value, maxSize));
    Ответ написан
    Комментировать