[英]setting “setState” done before then return value after setState : Reactjs
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. 我会喜欢这个实体[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完成。
finally, entity array will be [0:{nameEn:"example",nameSub:{"sub1","sub2",sub3"}} 1: {nameEn:"example2",nameSub:{"sub4","sub5"}]so on. 最后,实体数组将为[0:{nameEn:“ example”,nameSub:{“ sub1”,“ sub2”,sub3“}}} 1:1:{nameEn:” example2“,nameSub:{” sub4“,” sub5“ }]等等。
now main problem is nameSub of array[0] it null and nameSub[0] is second one. 现在的主要问题是array [0]的nameSub,它为null,nameSub [0]是第二个。 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' 从'react'导入React,{Component}从import'../App.css'
class addEntity extends Component { 类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>
)
}
} }
export default addEntity; 导出默认的addEntity;
setState
是异步的,因此当您需要等待状态更改之前,只需使用setState
的第二个参数即可,该参数将为您提供仅在所有更改完成后才被调用的回调:
this.setState({item}, () => console.log('only loggin when items are updated'))
setState
doesn't run synchronously. setState
不同步运行。 There's a second parameter into setState
that you can use to make sure that the state is actually set. setState
中还有第二个参数,您可以使用该参数来确保实际设置了状态。
this.setState(
state => { foo : 'bar' },
() => console.log(this.state.foo === 'bar') // true
)
console.log(this.state.foo === 'bar') // maybe true, but not gauranteed.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.