Блог

Главная - Вопросы по программированию - Функциональный компонент React не выполняет повторную визуализацию при изменении реквизита

Функциональный компонент React не выполняет повторную визуализацию при изменении реквизита

#javascript #reactjs #use-effect

#javascript #reactjs #использование-эффект

Вопрос:

Я использую axios для запроса в моем useEffect, и реквизит, который я передаю, — это всего лишь простой идентификатор. Вот основная часть моего кода;

     return (
        <>
            <Table striped bordered hover>

Комментарии:

1. StationID должен передаваться как зависимость useEffect: }, [stationId]);

Ответ №1:

Вы забыли передать реквизит stationData в массиве зависимостей:

     const [stationData, setStationData] = useState([]);

    useEffect(() => {
        console.log(`Fetching station ${stationId}`)
        axios.get(`http://localhost:3001/stations/${stationId}`)
            .then(response => {
                console.log(response);
                setStationData(response.data);
            })
            .catch(error => {
                console.log(error);
            });
    }, [stationData]); <--- HERE

    return (
        <>
            <Table striped bordered hover>

Комментарии:

1. Это работает, но я получаю бесконечное количество запросов, почему это?

2. useEffect аналогичен componentDidMount, каждый раз после этапа монтирования функция вызывается на основе указанной вами зависимости.

3. Причиной вашей ошибки может быть то, что ваша переменная состояния обновляется несколько раз, что вызывает перехват useEffect.