React, update component after async function set

Question

I want to add data and see in below, and also when I start app, I want see added records. But I can see it, when I'm try to writing something in the fields.

The thing is, the function that updates the static list is asynchronous. This function retrieves data from the database, but before assigning it to a variable, the page has been rendered. There is some way to wait for this variable or update information other way than when you try to type it in the fields. This is before the form is approved.

[![enter image description here][1]][1]

class AddAdvertisment extends React.Component <any, any> {
 private advertisment;

constructor(props, state:IAdvertisment){
 super(props);
 this.onButtonClick = this.onButtonClick.bind(this);
 this.state = state;
 this.advertisment = new Advertisement(props);
}

onButtonClick(){
  this.advertisment.add(this.getAmount(), this.state.name, this.state.description, this.state.date);
  this.setState(state => ({ showRecords: true }));
 }

 updateName(evt){
  this.setState(state => ({ name: evt.target.value })); 
 }
 ....

render() {  
 return (<React.Fragment>
 <div className={styles.form}>
 <section className={styles.section}>
 <input id="name" onChange={this.updateName.bind(this)} ></input>
 <input id="description" onChange={this.updateDescription.bind(this)} ></input>
 <input type="date" id="date" onChange={this.updateDate.bind(this)} ></input>
 <button className={styles.action_button} onClick={this.onButtonClick.bind(this)}>Add</button>
 </section>
 </div>
 {<ShowAdvertismentList/>}
 </React.Fragment>
 );
}

class ShowAdvertismentList extends React.Component <any, any>{
  render(){   
  let listItems;
  let array = Advertisement.ad

  if(array !== undefined){
    listItems = array.map((item) =>
    <React.Fragment>
      <div className={styles.record}>
        <p key={item.id+"a"} >Advertisment name is: {item.name}</p> 
        <p key={item.id+"b"} >Description: {item.description}</p> 
        <p key={item.id+"c"} >Date: {item.date}</p> 
      </div>
    </React.Fragment>
    );
  }
return <div className={styles.adv_show}>{listItems}</div>;

class Advertisement extends React.Component {
 public static ad:[IAdvertisment];
 constructor(props){
 super(props);
  if(!Advertisement.ad){
  this.select_from_db();
  }
 }
 ....
select_from_db = async () => {
 const res = await fetch('http://localhost:8000/select');
 const odp = await res.json();

 if(odp !== "brak danych")
  odp.forEach(element => {
    if(Advertisement.ad){
      Advertisement.ad.push(element);
    }
    else{
      Advertisement.ad = [element];

I try to create function and child like:

function Select_from_db(){
 const[items, setItems] = useState();
 useEffect(() => {
  fetch('http://localhost:8000/select')
   .then(res => res.json())
   .then(data => setItems(data));
  }, []);
return <div className={styles.adv_show}>{items && <Child items={items}/>} 
        </div>;
}

function Child({items}){
 return(
  <>
   {items.map(item => ( ...
   ))}
  </>

And is working good in first moment, but if I want add item to db I must refresh page to see it on a list below. I use is instead ShowAdvertismentList in render function. Elements be added to db but not showing below. In next click is this same, until refresh page.

And in my opinio better use a list, becouse I musn't want to conect to database every time to download all records. [1]: https://i.stack.imgur.com/IYSNU.gif

Have you read: The [redux async example](https://redux.js.org/introduction/examples#async)? The pattern for timeout and async is basically the same. [This answer](https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559) explains it from scratch. — Wyck, Apr 06 '21 at 02:17
If you mean like this: class ShowAdvertismentList extends React.Component { render(){ return setTimeout(() => { let listItems; let array = Advertisement.ad; (...) return
{ setTimeout(() => { return listItems }, 1000)}
; },1000); } } This can not be implement. Error: Error: Objects are not valid as a React child (found: object with keys {_idleTimeout, _idlePrev, _idleNext, _idleStart, _onTimeout, _timerArgs, _repeat, _destroyed}). If you meant to render a collection of children, use an array instead. — Mariusz Szczerba, Apr 06 '21 at 10:03

Mariusz Szczerba · Accepted Answer · 2021-04-06T21:25:33.527

0

I now recipe. I must change state on componentDidMount in AddAdvertisment class.

async componentDidMount(){
 let z = await setTimeout(() => {
  this.setState(state => ({ loaded: true})); 
 }, 1000);
}

render() {
 return (<React.Fragment >
  (...)
  {this.state.loaded ? <ShowAdvertismentList /> : <Loading/>}
 </React.Fragment>
 );
}

edited Apr 06 '21 at 21:25

answered Apr 06 '21 at 21:08

Mariusz Szczerba

41
8

React, update component after async function set

1 Answers1