Блог

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

 areWeBigger = () => {
  const { theirSize } = this.props;
  const { ourSize } = this.state;

  return ourSize > theirSize;
};

attemptToEat = () => {
  this.setState(({ ourSize }) => {
    const bigger = this.areWeBigger(); // Is this safe?

    return { ourSize: bigger ? ourSize   1 : ourSize - 1 }; 
  });
};
 

Редактировать

Теперь я понимаю, что то, что я называл «обратным вызовом», на самом деле называется «обновлением». Извините за путаницу.

Я думаю, это должно сработать. Синтаксис также немного отличается от того, что вы использовали. Вы не используете callback в приведенном выше примере, а скорее используете функциональное соглашение setState метода. Пожалуйста, обратитесь к документации React JS для получения дополнительной информации об этом. Кроме того, следующий фрагмент может представить лучший подход к тому, чего вы пытаетесь достичь.

 const areWeBigger = () => {
  const { theirSize } = this.props;
  const { ourSize } = this.state;
  return ourSize > theirSize;
};

const attemptToEat = () => {
  this.setState({ ourSize: "whatever value" }, () => {
    const bigger = this.areWeBigger(); // it is okay to use this
    // it doesn't return anything, that is not supported so remove your return statement
    // ideally you can also use componentDidUpdate lifecycle method if you don't want to always trigger a callback, you can refer react docs.
  })
     
  });
};
 

Похоже, в вашем случае вам не нужен обратный вызов setState.

Отсюда вы можете вызвать setState следующим образом:

 this.setState((prevState, props) => {
  return {counter: prevState.counter   props.step};
})
 

Таким образом, вы можете вызвать свою функцию areWeBigger следующим образом:

 areWeBigger = (ourSize , theirSize ) => {
  return ourSize > theirSize;
};

attemptToEat = () => {
  this.setState(({ ourSize }, {theirSize }) => { //extract ourSize and theiSize from (current)state and props respectively
    const bigger = this.areWeBigger(ourSize, theirSize ); // this is before the state is updated
    return { ourSize: bigger ? ourSize   1 : ourSize - 1 }; 
  });
};
 

Чтобы это мешало вам с прямым доступом к состоянию в «areWeBigger»:

 areWeBigger = () => {
  const {ourSize} = this.state;
  const {theirSize} = this.props;
  return ourSize > theirSize;
};

callback = () => {
  // ... here the state is up to date
}

attemptToEat = () => {
  this.setState(({ ourSize }) => { //extract ourSize and theiSize from (current)state and props respectively
    const bigger = this.areWeBigger(); // this is before the state is updated
    return { ourSize: bigger ? ourSize   1 : ourSize - 1 }; 
  }, callback); // to see the use of callback
};