setState Одно состояние объекта в функции отображения - PullRequest
Новая
       39

setState Одно состояние объекта в функции отображения

0 голосов
/ 17 октября 2018

Я занимался этим вопросом уже два дня.Не удалось найти решение в Интернете, и на данный момент я думаю, что я делаю что-то не так.

Итак, цель этого приложения - нажать кнопку и бросить яблоко.Нажатие на кнопку изменяет состояние дерева и имя класса в компоненте, вызывая его дрожание.А анимация 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;

Я хочу изменить одинстатуса яблок на «падение», не влияя на других.Например, возьмите яблоко с идентификатором 2 и измените его статус на «падающий».

Можете ли вы пройти через меня, как или указать мне некоторые точные ресурсы о том, как это делается.

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Вы не обновляете состояние правильно.Вы должны вернуть весь обновленный объект в 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
            })
        })) 
    }
}
0 голосов
/ 17 октября 2018

на dropApples, сделайте это, чтобы установить статус падения для случайного яблока 

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

В качестве отступления: setState является асинхронным, поэтому, когда вы делаете несколько вызовов setState, он может не зафиксировать предыдущийвызвать и, следовательно, вызвать несоответствия.

...