I do the weather app and need some help. In component Chart in options and series comes [object Object]. When you change something in the code, it is displayed. I think that the problem with useEffect? but i dont know how to fix that

import React, { useContext, useState, useEffect } from 'react';
import Chart from 'react-apexcharts';
import { Context } from '../../contex';


const WeatherGrapth = () => {
    
    const {dailyForecast} = useContext(Context);

    const [category, setCategory] = useState([])
    const [data, setData] = useState([])

    useEffect(() => {
        const day = [];
        const temp =[];
        const items = dailyForecast.map((d) => {
        const unixTimestamp = d.dt;
        const getTemp = Math.round(d.temp.day)
        let getDay = new Date(unixTimestamp* 3600 * 24 * 1000).getDate();
            day.push(getDay)
            temp.push(getTemp)
        })
        setCategory(day)
        setData(temp)
      }, []); 

    return(
        <div>
            <Chart options={{
                    chart: {
                        id: 'weather-graph'
                    },
                    xaxis: {
                        categories: category, 
                        title: {
                            text: 'Date',
                        },
                },
                yaxis: {
                    title: {
                        text: 'Temperature °C',
                    },
                },
                 }} 
                series={[{
                    name: 'temp',
                    data: data
                }]} type="line" height={'349px'} />
        </div>
    )
}

export default WeatherGrapth; 

But as soon as I change something in the code, everything will update and a graph will appear. 

CodePudding user response：

As React doc says:

By default, effect runs both after the first render and after every update

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run

If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders.

Probably At first dailyForecast context is empty or has not any valid data and after that it fills with data you should pass it to useEffect as dependency to run the effect at changes:

const {dailyForecast} = useContext(Context);

const [category, setCategory] = useState([])
const [data, setData] = useState([])

useEffect(() => {
    const day = [];
    const temp =[];
    const items = dailyForecast.map((d) => {
    const unixTimestamp = d.dt;
    const getTemp = Math.round(d.temp.day)
    let getDay = new Date(unixTimestamp* 3600 * 24 * 1000).getDate();
        day.push(getDay)
        temp.push(getTemp)
    })
    setCategory(day)
    setData(temp)
  }, [dailyForecast]);