Комментарии пользователя Максим Анциферов

Как сбросить состояние к начальному React?

Максим Анциферов @Babayka_od

Чтоб не было ворнига, можно инициализацию jokesList вынести в отдельную функцию, которая не будет использовать этот самый jokesList

import React, { useEffect, useState } from "react";
import "./styles.css";
import { JokeOne } from "./JokeOne";
import { JokeTwo } from "./JokeTwo";

export default function App() {
  const [jokesList, setJokesList] = useState([]);
  const [randomJoke, setRandomJoke] = useState("");

  const initJokesList = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${1}`)
      .then((res) => res.json())
      .then((data) => setJokesList([data.title]));
  }
  const addJoke = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${jokesList.length + 1}`)
      .then((res) => res.json())
      .then((data) => setJokesList([...jokesList, data.title]));
  }
  const getRandomJoke = () => {
    fetch("https://api.chucknorris.io/jokes/random?category=sport")
      .then((res) => res.json())
      .then((data) => setRandomJoke(data.value));
  };
  const handleReset = () => {
    getRandomJoke();
    setJokesList([]);
  }

  useEffect(() => {
    getRandomJoke();
    initJokesList();
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <hr />
      <JokeOne onAdd={addJoke} data={jokesList}/>
      <hr />
      <JokeTwo data={randomJoke}/>
      <hr />
      <button onClick={handleReset}>Обновить шутки</button>
    </div>
  );
}

Написано более трёх лет назад

Как сбросить состояние к начальному React?

Максим Анциферов @Babayka_od

Вот так

useEffect(() => {
    getRandomJoke();
    addJoke()
  }, []);

Написано более трёх лет назад

Как сбросить состояние к начальному React?

Максим Анциферов @Babayka_od

Mdmitr, не нужно добавлять функции в зависимости этого эффекта, иначе этот эффект будет вызываться будет при каждом рендере
В зависимости нужно передавать только то, при изменении чего нужно вызывать эффект, а пустой массив означает то, что эффект запустится только раз при монтировании элемента и все

Написано более трёх лет назад

Как сбросить состояние к начальному React?

Максим Анциферов @Babayka_od

Mdmitr, какие именно проблемы?

Написано более трёх лет назад

Как сбросить состояние к начальному React?

Максим Анциферов @Babayka_od

Я бы начал с этого, а в дальнейшем вынес бы это в state manager, с чистыми компонентами удобнее работать

import React, { useEffect, useState } from "react";
import "./styles.css";
import { JokeOne } from "./JokeOne";
import { JokeTwo } from "./JokeTwo";

export default function App() {
  const [jokesList, setJokesList] = useState([]);
  const [randomJoke, setRandomJoke] = useState("");

  const addJoke = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${jokesList.length + 1}`)
      .then((res) => res.json())
      .then((data) => setJokesList([...jokesList, data.title]));
  }
  const getRandomJoke = () => {
    fetch("https://api.chucknorris.io/jokes/random?category=sport")
      .then((res) => res.json())
      .then((data) => setRandomJoke(data.value));
  };
  const handleReset = () => {
    getRandomJoke();
    setJokesList([]);
  }

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

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <hr />
      <JokeOne onAdd={addJoke} data={jokesList}/>
      <hr />
      <JokeTwo data={randomJoke}/>
      <hr />
      <button onClick={handleReset}>Обновить шутки</button>
    </div>
  );
}

Написано более трёх лет назад

Как сбросить состояние к начальному React?

Максим Анциферов @Babayka_od

Mdmitr, обновлять хуки? Может фетчить данные при маунте компонента?

Написано более трёх лет назад

Валидация Кредитной карты на сайте?

Максим Анциферов @Babayka_od

sallahdin, https://codepen.io/Antsiferov/pen/abBomQK

Написано более трёх лет назад

Валидация Кредитной карты на сайте?

Максим Анциферов @Babayka_od

Сделайте свою форму тут (https://codepen.io/pen/) и тогда смогу помочь

Написано более трёх лет назад

Валидация Кредитной карты на сайте?

Максим Анциферов @Babayka_od

Должен быть красным

Написано более трёх лет назад

Возможно ли разбить ul li на 2 колонки flex?

Максим Анциферов @Babayka_od

iBird Rose, а есть уверенность, что всегда будет использоваться ul? И что не так с *?

Написано более трёх лет назад

Возможно ли разбить ul li на 2 колонки flex?

Максим Анциферов @Babayka_od

Есть такой вариант

.col2 {
  display: flex;
  flex-wrap: wrap;
}

.col2 > * {
  width: 50%;
}

Написано более трёх лет назад

Валидация Кредитной карты на сайте?

Максим Анциферов @Babayka_od

sallahdin, вот пример

const form = document.getElementById('form');
const cardNumberInput = document.getElementById('card-input');

form.addEventListener('submit', (event) => {
    const cardNumber = cardNumberInput.value;
    const isCardNumberValid = luhnAlgorithm(cardNumber);
    if (!isCardNumberValid) {
      event.preventDefault();
      cardNumberInput.classList.add('invalid-card')
    }
})

Написано более трёх лет назад

Валидация Кредитной карты на сайте?

Максим Анциферов @Babayka_od

sallahdin, вешаете обработчик на отправку формы, при событии submit берете номер карты из input и отправляете в функцию luhnAlgorithm, если функция вернута false, то навесить класс

Написано более трёх лет назад

Как посчитать сумму за день?

Максим Анциферов @Babayka_od

pesice4389, тогда вот такая функция

function trimNumber(num, count) {
    const [a = '0', b = ''] = String(num).split('.');
    return [a, b.slice(0, count).padEnd(count, '0')].join('.')
}

Написано более трёх лет назад

Как посчитать сумму за день?

Максим Анциферов @Babayka_od

1. Можно поместить баланс в span и навесить класс в зависимости от числа

<span class="bg-primary ${item.dailyBalance < 0 ? 'balance-negative' : 'balance-positive'}">${item.date} - ${item.dailyBalance}</span>

2. Обрезать числа после запятой можно при помощи метода toFixed
item.dailyBalance.toFixed(2)

Написано более трёх лет назад

NodeJS async\await в классах ES6, не работает?

Максим Анциферов @Babayka_od

ettaluni, попробуйте тогда оформить весь свой код в codepen и заменить вызовы к базе на setTimeout, например

deDB.run('SELECT id, dt FROM meta', function(err) {
  if (err) {
    res = true;
  }
  console.trace('Step1');
  resolve();
});

Заменить на

setTimeout(() => {
  if (err) {
    res = true;
  }
  console.trace('Step1');
}, 1000)

Написано более трёх лет назад

NodeJS async\await в классах ES6, не работает?

Максим Анциферов @Babayka_od

async isNew() {
    let res = false;
    let deDB = this.deDB;
    let fd = await new Promise((resolve) => {
      deDB.run('SELECT id, dt FROM meta', function(err) {
        if (err) {
          res = true;
        }
        console.trace('Step1');
        resolve();
      });
    });
    console.trace('Step2 ' + res);
    return res;
  }

Написано более трёх лет назад

Как посчитать сумму за день?

Максим Анциферов @Babayka_od

Оформите свой пример на codepen и добавьте данные, которые возвращает ajax, чтоб было легче вам помочь

Написано более трёх лет назад

При клике на пустое место, чтобы исчезало модальное окно?

Максим Анциферов @Babayka_od

Добавил проверку в if, что target не находится в модальном окне

const btn = document.getElementById ('share');
const modal = document.getElementById ('news_share');
btn.onclick = () => {
  modal.classList.add("active");

  modal.addEventListener("click", closeModal);
};
document.onclick = function(event){
  var target = event.target
    if (target !== modal && !modal.contains(target)) {   // <--------------------- Вот тут
       closeModal();
    }
};
function closeModal() {
  modal.removeEventListener("click", closeModal);
};

Написано более трёх лет назад

Как дождаться загрузки всех картинок в React?

Максим Анциферов @Babayka_od

Можно попробовать вот так

const BATCH_SIZE = 1000;
const cacheImages = async () => {
  const batches = await lodash.chunk(srcArray, BATCH_SIZE);

  for (const batch of batches) {
    const promises = batch.map(src => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = resolve;
        img.onerror = reject;
        img.src = src;
        window[src] = img;
      });
    });

    await Promise.all(promises);
  }
};

Написано более трёх лет назад

Войдите на сайт