我创建了这段代码,点击一个按钮,它的 id 在数组“allInterest”中连接。
但是在这里我注意到,它的设置状态落后于一个状态。就像如果我第一次单击按钮然后在控制台中,它的数组是空白的,但是当我单击另一个按钮时,它会采用第一次单击的按钮 ID,同样如此进一步。
请指导我为什么会发生这种情况。谢谢期待
export default class Test extends Component {
constructor(props, context) {
super(props, context);
this.handleChange = this.handleChange.bind(this);
this.state = {
value:'',
numbers:[1, 2, 3, 4, 5],
posts : [
{id: 1, topic:"Animal"},
{id: 2, topic:"Food"},
{id: 3, topic:"Planet"},
{id: 4, topic:"Nature"},
],
btnSelected:false,
allInterest:[],
};
console.log(this.state);
}
handleChange(e) {
//console.log(e.target.value);
const name = e.target.name;
const value = e.target.value;
this.setState({[name]: value});
console.log(this.state)
}
getInterest(id){
console.log(id);
console.log(this.state.allInterest)
// if(this.state.allInterest.length>0 )
// {
// console.log("Yes we exits");
// }
// else
// {
console.log(id)
// this.setState({
// allInterest:this.state.allInterest.concat(id)
// })
this.setState((prevState) => ({
allInterest: prevState.allInterest.concat([id])
}));
// }
console.log(this.state)
}
render() {
// numbers = [1, 2, 3, 4, 5];
return (
<div>
<div className="signupApp">
Test
{this.state.listobj}
{ this.state.posts.map((posts,index) =>
<li key={'tab'+index} class="btn btn-default" onClick={()=>this.getInterest(posts.id)} onChange={() => this.handleChange(this.event)}>{posts.topic}</li>
)}
</div>
</div>
);
}
}