retrieveInTransit()
is the click handler. An API call retrieves data and returns an array of objects into the new state object in the setState()
function. The first click logs an empty array for the pumps
property. If I click it again, I get the populated array of pumps
. Why do I have to click twice? The Equipment component
does not render even though the log in the render()
function returns the correct array of pumps which is passed in as a prop for the Equipment component
. I am at a loss on this and any help would be appreciated.
import React, { Component } from 'react';
import {ListGroup} from 'reactstrap';
import Equipment from './Equipment';
class Transit extends Component {
constructor(props) {
super(props);
this.state = {
pending: false,
pumps: []
};
}
handleCancelClick = (index) => {
this.setState((prevState) =>
prevState.pumps[index].isCancelled = !prevState.pumps[index].isCancelled
);
this.setState((prevState) => {
prevState.pumps.every((equipment) => equipment.isCancelled === false)
? prevState.pending = false: prevState.pending = true
}
)};
populate_transit = () => {
let pumpArray = [];
fetch('http://192.168.86.26:8000/api/v1/transit_list', {mode: 'cors'})
.then(response => response.json())
.then(MyJson => MyJson.map((entry) =>{
if (document.getElementsByClassName('title')[0].innerText.toLowerCase().includes(entry.transferfrom)) {
pumpArray.push(
{
unitnumber: entry.unitnumber,
id: entry.id,
message: entry.unitnumber + ' was moved to ' + entry.transferto,
isCancelled: false
});
}}));
return pumpArray
};
cancelTransit = () => {
let cancelled = this.state.pumps.filter((movement) => movement.isCancelled);
let cancelledId = cancelled.map((object) => object.id);
fetch('http://192.168.86.26:8000/api/v1/transit_list/', {
method:'POST',
mode: 'cors',
body: JSON.stringify(cancelledId),
headers:{
'Content-Type': 'application/json'
}
}
);
this.populate_transit()
};
retrieveInTransit = () => {
if (this.state.pending) {
this.setState({
pending: false,
pumps: this.cancelTransit()
}, console.log(this.state))} else {
this.setState({
pending: false,
pumps: this.populate_transit()
}, console.log(this.state))
}
};
render() {
console.log(this.state.pumps);
return (
<ListGroup>
<Equipment transitequipment={this.state.pumps} cancelClick={this.handleCancelClick}/>
<button className='btn btn-dark' onClick={this.retrieveInTransit}>
{this.state.pending ? 'Submit Cancellations': 'Refresh'}
</button>
</ListGroup>
);
}
}
export default Transit;
populate_transit = () => {
let pumpArray = [];
fetch('http://192.168.86.26:8000/api/v1/transit_list', {mode: 'cors'})
.then(response => response.json())
.then(MyJson => MyJson.map((entry) =>{
if (document.getElementsByClassName('title')[0].innerText.toLowerCase().includes(entry.transferfrom)) {
pumpArray.push(
{
unitnumber: entry.unitnumber,
id: entry.id,
message: entry.unitnumber + ' was moved to ' + entry.transferto,
isCancelled: false
});
}}));
return pumpArray};
So, In the code above, you are returning pumpArray
outside of the fetch
call. Since fetch
takes time to call
the api
and resolve
the promise, the current value of your pumpArray
= []
that's why you get the empty array at first. On the next click
promise
is already resolved
so you get your pumpedArray
. In order to fix this, move the pumpArray
inside then
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.