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;

我想要的是在不影响其他苹果的情况下将其中一个苹果的状态更改为 'falling'。例如，获取 id 为 2 的苹果并将其状态更改为 'falling'.

能否请您向我介绍一下操作方法，或者给我一些关于如何完成的确切资源。

Answer 1

在 dropApples 上，执行此操作将随机苹果的状态设置为掉落

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

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

Answer 2

您没有正确更新状态。您应该 return 将整个更新对象设置为 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
            })
        })) 
    }
}

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

setState One State of an Object in a Mapping Function

javascript

reactjs

react-native

components

react-component