Question

我会喜欢这个实体[nameEn：“ example”，nameSub：[{“ sub1”，“ sub2”，sub3“}]]因此，首先，我将输入nameSub保留到subEn数组，然后将subEn中的值添加到subEns （例如：subEn：[0：“ sub1”] [1：“ sub2”]，然后subEns：0：[{0：“ sub1”，“ sub2”}]）但是，现在我遇到了一些问题。在“ addSubs”函数必须先完成setState，然后返回“ this.state.subEns”以添加到实体数组。

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

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

从'react'导入React，{Component} 导入“ ../ App.css”

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

}

导出默认的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.

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

2 个答案: