Tengo un gráfico de velas para una criptografía y tiene un marco de tiempo diferente para 1 minuto, 30 minutos, etc. actualmente tengo
const [data, setData] = useState[] useEffect(() => { const fetchPrice = async () => { const { data } = await axios.get(`/api/apii?slug=${poolName[0].pool_id}&timeframe=`${1h}``); // default is 1h const btcusd = data.data.results.map( (d) => { return { open: d.open, close: d.close, low: d.low, high: d.high, time: toDateStamp(d.datetime), }; } ); setData(btcusd) }; fetchPrice() }, []);Lo anterior es el estado inicial cada vez que un usuario visita el cual se le mostrará un gráfico de datos de 1 hora. Entonces, existe este botón onClick que buscará y establecerá un nuevo estado de acuerdo con el período de tiempo elegido. Funciona si configuro los datos para un período de tiempo, pero luego, si configuro otro período de tiempo, ¿cómo los separo?
Editar:
Mis chicos malos, no tengo problemas para que el efecto de uso se ejecute nuevamente, ya que tengo otro efecto de uso para ese propósito cada vez que un usuario hace clic en un nuevo período de tiempo. Mi pregunta es ¿cómo puedo almacenar los marcos de tiempo elegidos en un estado y luego volver a usarlos si el usuario elige el marco de tiempo que eligió antes? Esto sería bueno ya que puedo detener la solicitud de red saliente.
puede usar el operador de propagación dentro setData() para obtener los valores antiguos, luego agregue el nuevo valor, algo como esto:
setData( oldValues => [ ...oldValues, newValue ] );Puede establecer datos como objeto con claves como marcos de tiempo fe
const [data, setData] = useState(); const TIMEFRAMES = { HOUR: '1h', HALF_HOUR: '30min', }; const hourlyNewData = { price: 1 }; setData((prevdata) => { ...prevData, [TIMEFRAMES.HOUR]: newData, }); const minutelyNewData = { price: 1.1 }; setData((prevData) => { ...prevData, [TIMEFRAMES.HALF_HOUR]: minutelyNewData, }); // and to access data: const hourlyData = data[TIMEFRAMES.HOUR]; const minutelyData = data[TIMEFRAMES.HALF_HOUR]Debe agregar sus valores dinámicos, como 1h y poolName a la matriz de dependencia de esta manera:
useEffect(() => { ... }, [1h, poolNames])