通过 redux 调度操作时组件重复

Question

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

这里是 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 中显示图表？谢谢

Answer 1

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

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

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

通过fetchData() 呼叫将其放入您的useEffect