He escrito una función que se desencadena por el evento onChange de una lista desplegable. Una vez que se activa la función, carga datos de la API de descanso de acuerdo con el valor del parámetro. Sin embargo, la matriz que he usado para almacenar esos datos no se borra en los eventos de cambio desplegables posteriores. Como resultado, cuando el usuario cambia el menú desplegable varias veces, la matriz crece con los datos cargados previamente.
por ejemplo: En el primer cambio desplegable => ['A','B','C'] Segundo cambio desplegable => ['A','B','C','E','F', 'G'] en lugar de ['E','F','G']
Mi código es el siguiente:
onDropdownChange = (e) => { var newArray = []; // To remove all the elements of newArray newArray.forEach((e1,idx, arr) => { newArray.splice(idx,1); }); console.log(newArray); const url = 'https://abcdefgh...../' + e + '/readings?today'; newArray = this.state.data.slice(); axios.get(url).then(res => { var response_arr = res.data.items; res.data.items.forEach((item, index) => { newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value }) }) let sortedArray = newArray.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime()); this.setState({ data: sortedArray }); this.fetchChart(); }); } fetchChart = () => { const { data } = this.state; return <CustomLineChart data={data} /> } render(){ const {items} = this.state; var data = []; const itemList = items.map(item => { return <tr key={item.dateTime+''+item.value}> <td style={{whiteSpace: 'nowrap'}}>{item.dateTime}</td> <td>{item.measure}</td> <td>{item.value}</td> </tr> }); return ( <div> {this.fetchChart()} <CustomDropdownList changeLink={this.onDropdownChange.bind(this)} /> </div> ); } } export default Dashboard;¿Alguien puede ayudarme a resolver este problema?
Estás copiando los datos anteriores con
newArray = this.state.data.slice();No necesita eso. De hecho, no necesita nada de esto si desea crear una nueva matriz con nuevas opciones.
Está agregando los resultados a newArray que comienza vacío que intentó borrar, luego se establece en los datos existentes con datos adicionales agregados. Además, evite usar var.
var newArray = []; // This is already empty newArray.forEach((e1,idx, arr) => { newArray.splice(idx,1); }); // This will always be empty console.log(newArray); const url = 'https://abcdefgh...../' + e + '/readings?today'; // Existing data, remove this newArray = this.state.data.slice(); axios.get(url).then(res => { var response_arr = res.data.items; res.data.items.forEach((item, index) => { // This is where new data is being added to existing newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value }) })