Блог

Я делаю запрос GET к своей базе данных, и данные поступают и отображаются, но в тот момент, когда данные обновляются в моей базе данных, они не обновляются в компоненте, который использует эти данные.

Редактировать на основе комментариев, которые мне нужны для непрерывного запроса GET, поэтому я обновил вопрос.

Используйте эффект () для установки данных в состояние

 // Data for each of the tags
const [tag1, setTag1] = useState();
const [tag2, setTag2] = useState();
const [tag3, setTag3] = useState();

useEffect(() => {
    axios
        .get(URL)
        .then(res => {
            const data = res.data;
            // Passing in the setter method
            setTagDetails(data, setTag1, setTag2, setTag3);
        })
        .catch(error => {
            console.log(error);
        });
}, []);

  

setTagDetails(), где поступающие данные разделяются на разные состояния, которые будут использоваться в компоненте:

 
// Splitting the data by each corresponding tag and adding them to their respective state
export const setTagDetails = (data, setTag1, setTag2, setTag3) => {
    const arr1 = [];
    const arr2 = [];
    const arr3 = [];
    try {
        data amp;amp;
            data.forEach(d => {
                // Entries into the database which do not have any tag information
                // have a size of 5 and those with all the details have a size of 6
                const sizeOfObject = Object.keys(d).length;
                // Only need database items with all the details
                if (sizeOfObject > 5) {
                    // Split the data for the tags into their respective name
                    const name = d["tags"]["L"][0]["M"]["name"]["S"];
                    // Will be used to set individual datasets for each tag
                    if (name === "Tag1") {
                        cleanTag(d, arr1);
                    }
                    if (name === "Tag2") {
                        cleanTag(d, arr2);
                    }
                    if (name === "Tag3") {
                        cleanTag(d, arr3);
                    }
                }
            });
        setTag1(arr1);
        setTag2(arr2);
        setTag3(arr3);
    } catch (err) {
        console.log(err);
    }
};
  

Когда вы хотите выполнять функцию каждые x промежутков времени, мы используем метод setInterval . Он будет вызывать переданную функцию (в качестве первого аргумента) каждые x миллисекунд (где x — второй аргумент, в приведенном ниже случае, 1000 мс или 1 секунда).

 useEffect(() => {
const interval = setInterval(() => {
   axios
    .get(URL)
    .then(res => {
        const data = res.data;
        // Passing in the setter method
        setTagDetails(data, setTag1, setTag2, setTag3);
    })
    .catch(error => {
        console.log(error);
    });
  }, 1000);
  return () => clearInterval(interval);
}, []);
  

Пожалуйста, обратите внимание, что лучше всего помнить о подключениях пользователя к Интернету в случае медленной мобильной сети или политики провайдера с ограниченной пропускной способностью. Существует также опасность выполнения запросов так близко друг к другу, что мы вводим условие гонки. Наконец, вы ДОЛЖНЫ очистить интервал, иначе вы значительно снизите производительность вашего приложения.