Отложить React Hook useLayoutEffect до завершения useEffect? - PullRequest
Новая
       40

Отложить React Hook useLayoutEffect до завершения useEffect?

0 голосов
/ 03 августа 2020

У меня есть компонент, в котором я использую ловушку useEffect для извлечения данных из API. Я хочу отображать данные в виде диаграммы с помощью AMCharts. Моя проблема в том, что мне нужно использовать крючок useLayoutEffect для создания диаграммы, и диаграмма основана на данных, полученных с помощью useEffect ... Когда моя диаграмма визуализируется, у меня еще нет данных, а моя диаграмма пусто. Как я могу отложить useLayoutEffect до тех пор, пока данные не будут получены?

Я часто использую useEffect в своем приложении для получения данных и отображения необходимой мне информации. Я пытался сделать и то, и другое (получить данные и создать диаграмму) в ловушке useEffect или useLayoutEffect, но это не сработало. Я не могу использовать условие перед использованием useLayoutEffect, тоже пробовал ... 

const AmChart = (props) => {
    const chartRef = useRef(null);

    const [data,setData] = useState([]);
    const [startDate,setStartDate] = useState(new Date());
    const [endDate,setEndDate] = useState(new Date());

    useEffect(() => {
        let from = startDate.getFullYear().toString() + ('0' + (startDate.getMonth() + 1)).slice(-2) + ('0' + startDate.getDate()).slice(-2);
        let to = endDate.getFullYear().toString() + ('0' + (endDate.getMonth() + 1)).slice(-2) + ('0' + endDate.getDate()).slice(-2);
        dataService.getData(from,to)
            .then(response => {
                setData(response.data);
            });
    },[]);

    useLayoutEffect(() => {
        let x = am4core.create("chartdiv", am4charts.XYChart);
        // ... creation of the chart
        chart.data = data;
        // ... creation of the chart
        chart.current = x;

        return () => {
          x.dispose();
        };
    }, []);

    return (
      <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div>
    );
}

Ответы [ 2 ]

0 голосов
/ 09 августа 2020

Вы должны добавить «данные» в список зависимостей для useEffect. Для получения дополнительной информации прочтите эту статью: Документы по условному срабатыванию useEffect

0 голосов
/ 03 августа 2020

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

useLayoutEffect(()=>{}, [data])
...