setState 映射函数中对象的一种状态

Question

我已经处理这个问题两天了。无法在网上找到解决方案，在这一点上，我认为我做错了什么。

所以这个应用程序的重点是点击按钮并放下一个苹果。单击该按钮会更改组件中树的状态和类名，从而导致树摇晃。剩下的就交给萨斯动画了。但我不能改变一个苹果的类名。因此，不能使一个苹果动画化。我认为它只是改变了所有这些，它们有点重叠。这不是我想要的。

不知道我是否处理错了该过程，但这是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 的苹果并将其状态更改为"正在下降"。

您能否通过我了解如何或指出一些有关如何完成的确切资源。

Answer 1

您没有正确更新状态。您应该将整个更新的对象返回到 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
})
})) 
}
} 

Answer 2

在 dropApple 上，执行此操作以将状态设置为随机苹果

this.setState({
apples: this.state.apples.map(
apple => apple.id === random ? { ...apple, status: 'falling' } : apple
})

顺便说一句：setState 是异步的，因此当您对 setState 进行多次调用时，它可能没有提交上一个调用，因此会导致不一致。