apexcharts-react 和 useEffect 的问题

Question

我在做天气应用，需要一些帮助。在选项和系列的组件 Chart 中出现 [object Object]。当您更改代码中的某些内容时，它会显示出来。我认为 useEffect 的问题？但我不知道如何解决

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;

但是只要我更改代码中的某些内容，所有内容都会更新并且会出现一个图表。

Answer 1

正如 React 文档所说：

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.

可能一开始 dailyForecast 上下文为空或没有任何有效数据，然后它填充了数据，您应该将其传递给 useEffect 作为对运行变化时效果的依赖：

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]);

apexcharts-react 和 useEffect 的问题

Problem with the apexcharts-react and useEffect

reactjs

apexcharts