通过 redux 分派动作时组件重复

问题描述

所以我编写了一些代码来显示图表，我还编写了一个函数，可以让我更改图表的时间范围。但是，当调用此函数时，会弹出一个重复的图表。

这是 Chart.js

let chartProperties = {
    width: 1000,height: 500,timeScale: {
        timeVisible: true,secondsVisible: false
    }
}

const Chart = (props) => {

    useEffect(() => {
        fetchData()
    },[])

    const lightweightChart = createChart(document.body,chartProperties);
    const candleSeries = lightweightChart.addCandlestickSeries();

    const fetchData = () => {
        axios.get(`https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1m&limit=1000`)
            .then(response => response.data)
            .then(data => {
                const candlestickData = data.map(d => {
                    return { time: d[0] / 1000,open: parseFloat(d[1]),high: parseFloat(d[2]),low: parseFloat(d[3]),close: parseFloat(d[4]) }
                });
                candleSeries.setData(candlestickData);
            }).catch(error => console.log(error))
    }

    return (
        <div>
        </div>
    );
}

const mapStatetoProps = (state) => {
    return {
        chartData: state.chartOptionsReducer
    }
}

export default connect(mapStatetoProps)(Chart);

这是动作创建者 chartActions.js

export const changeTimeframe = (timeframe) => {
    return {
        type: 'CHANGE_TIMEFRAME',payload: {
            timeframe: timeframe
        }
    }
}

这里是reducer chartOptionsReducer.js

const initState = {
    symbol: 'BTCUSDT',timeframe: '4h'
}

const chartOptionsReducer = (state = initState,action) => {
    console.log(action)
    if (action.type === 'CHANGE_TIMEFRAME') {
        let newTimeframe = action.payload.timeframe
        return {
            ...state,timeframe: newTimeframe
        }
    } else {
        return state;
    }
}

export default chartOptionsReducer;

最后，这是从 OptionsColumn.js

调用操作的地方

const OptionColumn = (props) => {

    const handleTimeframe = (timeframe) => {
        props.changeTimeframe(timeframe)
    }

    return (
        <Menu
            label="Timeframe"
            items={[
                { label: '1m',onClick: () => { handleTimeframe('1m') } },{ label: '4h',onClick: () => { handleTimeframe('4h') } },]}
        />
    )
}

const mapdispatchToProps = (dispatch) => {
    return {
        changeTimeframe: (timeframe) => { dispatch(changeTimeframe(timeframe)) }
    }
}

export default connect(mapStatetoProps,mapdispatchToProps)(OptionColumn);

我认为问题可能来自 Chart.js 中的这一行，但我不确定，我也不知道如何避免它：

const lightweightChart = createChart(document.body,chartProperties);

奖励问题： 任何熟悉 lightweightChart 包的人，有没有办法在容器中而不是 document.body 中显示图表？谢谢

解决方法

在 React 中，组件将在某些条件下重新渲染，包括 props 更改。

每当 Chart.js 重新渲染（每次都会创建新的图表定位document.body）时，下面的代码都会重新运行

const lightweightChart = createChart(document.body,chartProperties);

通过您的 useEffect 调用将其放入您的 fetchData()