在 setState 之前设置“setState”，然后在 setState 之后返回值：Reactjs

Question

我会喜欢这个实体[nameEn:"example",nameSub:[{"sub1","sub2",sub3"}] 所以首先，我将输入 nameSub 保留到 subEn 数组，然后将 subEn 中的值添加到 subEns .(示例：subEn: [0: "sub1"] [1:"sub2"] then subEns: 0:[{0:"sub1","sub2"}]) 但是现在我有一些问题。在“addSubs”函数它必须在返回“this.state.subEns”之前完成 setState 以添加到实体数组。

最后，实体数组将是 [0:{nameEn:"example",nameSub:{"sub1","sub2",sub3"}} 1: {nameEn:"example2",nameSub:{"sub4","sub5"}]等等。

现在主要问题是 array[0] 的 nameSub 为 null 而 nameSub[0] 是第二个。如果你有更好的解决方案，你可以建议我。我只是通过反应开始代码。谢谢你的建议。

从 'react' 导入 React,{Component} 导入'../App.css'

类 addEntity 扩展组件 {

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>
    )
}

}

导出默认添加实体；

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.