setting “setState” done before then return value after setState : Reactjs

Question

I will do like this entity[nameEn:"example",nameSub:[{"sub1","sub2",sub3"}] so first, I will keep input nameSub to subEn array then add value in subEn to subEns.(Example: subEn: [0: "sub1"] [1:"sub2"] then subEns: 0:[{0:"sub1","sub2"}]) But now I have some problem. At "addSubs" function it have to do setState done before return "this.state.subEns" for add to entity array.

finally, entity array will be [0:{nameEn:"example",nameSub:{"sub1","sub2",sub3"}} 1: {nameEn:"example2",nameSub:{"sub4","sub5"}]so on.

now main problem is nameSub of array[0] it null and nameSub[0] is second one. If you have solution is better, you can suggest me. I just begin code by react. thank you for your suggest.

import React,{Component} from 'react' import '../App.css'

class addEntity extends Component {

constructor(props){
    super(props);
    this.state ={
        index: 1,
        entity: [],
        subEn: [],
        subEns: [],
        nameEn: "",
        nameSub: "",
        addEn: false,
    }
    this.addEntitys = this.addEntitys.bind(this)
    this.cancel = this.cancel.bind(this)
    this.addEntity = this.addEntity.bind(this)
    this.formSave = this.formSave.bind(this)
}


addEntitys() {
    this.setState({
        addEn: true
    })
}

addSub(...nameSub) {
    // this.setState({addSub:true})
    this.setState(prevState => ({
        subEn: [...prevState.subEn,{nameSub}]
    }))
    // this.state.subEn[this.state.i] = {nameSub}
    // this.state.j=this.state.j+1
}

addSubs(...nameSub) {
    this.setState(prevState => ({
        subEns: [...prevState.subEns, {nameSub}]
    }))
    return this.state.subEns
}

addEntity(nameEn,...nameSub) {
    this.setState(prevState => ({
        entity: [...prevState.entity, {nameEn,nameSub}]
    }))
}


changeNameEn(event) {
    let names = event.target.value
    this.setState((state,props) => {
        return{
            nameEn: names
        }
    })
}

changenameSub(event) {
    let nameSubs = event.target.value
    // this.setState({addSub:false})
    this.setState((state,props) => {
        return{
            nameSub: nameSubs
        }
    })
}


formSave(event) {
    event.preventDefault();
    // this.addSubs(this.state.subEn)
    this.addEntity(this.state.nameEn,this.addSubs(this.state.subEn))
    this.setState({
        addEn: false,
        index: this.state.index+1,
        nameEn: "",
        nameSub: "",
        subEn: []
    })
}

render() {
    return(
        <div style={{marginLeft:'30px'}}>
            <button onClick={this.addEntitys} className="submit">
                + Add Entity
            </button>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col" onClick={()=>this.test(this.state.index)}>#</th>
                        <th scope="col">Entity Type</th>
                        <th scope="col">Sub-type</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                    {this.state.entity.map((text,index) =>{
                        return(
                            <tr key={text.nameEn}>
                                <th>{index+1}</th>
                                <td scope="col">{text.nameEn}</td>
                                <td scope="col">
                                    {/* {this.state.subEns.map(text => {
                                        return(
                                            <p>{text.nameSub}</p>
                                        )
                                    })} */}
                                </td>

                                <td>
                                    <button onClick={this.deleteText(text.nameEn)} className="delete">
                                        Delete
                                    </button>
                                </td>
                            </tr>
                        )
                    })}
                    {this.state.addEn == true ?
                            <tbody>
                                <tr>
                                    <th>{this.state.index}</th>

                                    <td scope="col">                                        
                                        <input onChange={this.changeNameEn.bind(this)} type="text"></input>
                                    </td>

                                    <td scope="col">
                                        <input onChange={this.changenameSub.bind(this)} type="text"></input>
                                        <button className="add" onClick={()=>this.addSub(this.state.nameSub)}>+ Add</button>
                                        {this.state.subEn.map((text) => {
                                            return(
                                                <p>{text.nameSub}
                                                    <span aria-hidden="true" className="delete" onClick={this.deleteSubEn(text.nameSub)}>
                                                        ×
                                                    </span>
                                                </p>
                                            )
                                        })}
                                    </td>

                                    <td scope="col">
                                        <button onClick={this.cancel} className="cancelEn">Cancel</button>
                                        <input onClick={this.formSave} type="submit" value="save" className="submit">
                                        </input>
                                    </td>
                                </tr>
                            </tbody> 
                        :null
                    }
            </table>

        </div>
    )
}

}

export default addEntity;

Answer 1

setState是异步的，因此当您需要等待状态更改之前，只需使用setState的第二个参数即可，该参数将为您提供仅在所有更改完成后才被调用的回调：

this.setState({item}, () => console.log('only loggin when items are updated'))

Answer 2

setState doesn't run synchronously. There's a second parameter into setState that you can use to make sure that the state is actually set.

this.setState(
  state => { foo : 'bar' },
  () => console.log(this.state.foo === 'bar') // true
)
console.log(this.state.foo === 'bar') // maybe true, but not gauranteed.