setState映射函數中對象的一種狀態

Question

我已經處理了兩天了。 找不到在線解決方案，目前我認為我做錯了。

因此，此應用程序的重點是單擊按鈕並放一個蘋果。 單擊該按鈕會更改組件中樹的狀態和類名，從而使其搖動。 其余部分由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的蘋果，並將其狀態更改為“下降”。

您能否逐步介紹我的工作方式或向我指出有關工作方式的確切資源。

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

在dropApples上，執行此操作以將隨機蘋果的狀態設置為下降

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

順便說一句：setState是異步的，因此當您多次調用setState時，它可能尚未提交先前的調用，因此會導致不一致。