設置“ setState”之前完成，然后在setState之后返回值：React.js

Question

我會喜歡這個實體[nameEn：“ example”，nameSub：[{“ sub1”，“ sub2”，sub3“}]]，所以首先，我將輸入nameSub保留到subEn數組，然后將subEn中的值添加到subEns。（示例：subEn：[0：“ sub1”] [1：“ sub2”]然后subEns：0：[{0：“ sub1”，“ sub2”}]））但是現在我有些問題。在“ addSubs”函數中在返回“ this.state.subEns”以添加到實體數組之前執行setState完成。

最后，實體數組將為[0：{nameEn：“ example”，nameSub：{“ sub1”，“ sub2”，sub3“}}} 1：1：{nameEn：” example2“，nameSub：{” sub4“，” sub5“ }]等等。

現在的主要問題是array [0]的nameSub，它為null，nameSub [0]是第二個。 如果您有更好的解決方案，可以建議我。 我只是通過反應開始代碼。 謝謝你的建議。

從'react'導入React，{Component}從import'../App.css'

類addEntity擴展了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>
    )
}

}

導出默認的addEntity;

Answer 1

setState是異步的，因此當您需要等待狀態更改之前，只需使用setState的第二個參數即可，該參數將為您提供僅在所有更改完成后才被調用的回調：

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

Answer 2

setState不同步運行。 setState中還有第二個參數，您可以使用該參數來確保實際設置了狀態。

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