![](/img/trans.png)
[英]Mapping objects, and using state, and passing value through a function in setState
[英]setState One State of an Object in a Mapping Function
我已经处理了两天了。 找不到在线解决方案,目前我认为我做错了。
因此,此应用程序的重点是单击按钮并放一个苹果。 单击该按钮会更改组件中树的状态和类名,从而使其摇动。 其余部分由Sass动画完成。 但是我不能更改一个苹果的类名。 因此,不能为一个苹果制作动画。 我认为这只会改变所有人,而且彼此之间有些重叠。 这不是我想要的。
不知道我是否处理错误,但这是app.js的代码:
class App extends Component {
constructor(props){
super(props);
this.state = {
apples: [],
treeState: ''
}
}
componentWillMount(){
this.setState(
{
apples: [
{
id: '1',
status: 'present'
},
{
id: '2',
status: 'present'
},
{
id: '3',
status: 'present'
}
],
treeState: 'stagnant'});
}
render() {
return (
<div className="App">
<div className="App-header">
<img onClick={this.shakeTree.bind(this)} className="grab" alt="grab"/>
<Apples apples={this.state.apples}/>
<Tree treeState ={this.state.treeState}/>
</div>
</div>
);
}
shakeTree() {
var css = (this.state.treeState === "stagnant") ? "shaking" : "stagnant";
this.setState({"treeState":css});
this.dropApples();
}
dropApples(){
let apple;
var random = 2;
if(this.state.apples){
apple = this.state.apples.map(applemon => {
if(applemon.id==random){
this.setState(
{
apples: [
{
id: random,
status: 'falling'
}
]});
}
});
}
}
}
export default App;
我想要的是将一个苹果的状态更改为“下降”,而不影响其他苹果。 例如,获取ID为2的苹果,并将其状态更改为“下降”。
您能否逐步介绍我的工作方式或向我指出有关工作方式的确切资源。
您没有正确更新状态。 您应该将整个更新的对象返回给setState
dropApples(){
let apple;
var random = 2;
if(this.state.apples){
this.setState(prevState => ({
apples: prevState.apples.map(apple => {
if (apple.id == random) return {...apple, status: 'falling'}
return apple
})
}))
}
}
在dropApples上,执行此操作以将随机苹果的状态设置为下降
this.setState({
apples: this.state.apples.map(
apple => apple.id === random ? { ...apple, status: 'falling' } : apple
})
顺便说一句:setState是异步的,因此当您多次调用setState时,它可能尚未提交先前的调用,因此会导致不一致。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.