Не удается установить значение в переменной в React

Question

В моем приложенииactjs я пытаюсь установить значение для переменных данных, но оно не присваивается. Он должен быть назначен из nextProps.samples, который содержит значения, и я могу войти в консоль браузера, эти значения.

Вот кусок кода:

export default class GeofencingSamplesDL extends React.Component {
  // eslint-disable-line react/prefer-stateless-function

  state = {
    data: []
  };

  componentWillReceiveProps = nextProps => {
    let data = [];

    if (this.props.samples !== nextProps.samples) {

      nextProps.samples.forEach(sample => {
        data.push({
          Date: sample.timestamp,
          Semelle: sample.macAddress,
          Gateway: sample.deviceID,
          Pas: sample.steps,
          RSSI: sample.rssi,
          RawSteps: sample.rawSteps
        });        

        // Here values are visible as I print in console
        console.log("Sample " + JSON.stringify(sample));        



      });

      // Here values are not getting set
      this.setState({ data });      
    }

  };

Есть выход? Заранее спасибо.

Answer 1

setState является асинхронным / синхронизированным в зависимости от того, как вы его вызываете. Значения установлены, но вы пока не можете их увидеть. Попробуйте записать данные в рендер. Или попробуйте это this.setState({ data }, () => console.log(this.state.data));

Использование этого метода componentWillReceiveProps часто приводит к ошибкам и несоответствиям. больше здесь https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

Answer 2

a) componentWillReceiveProps устарело / считается небезопасным в последней версии React. https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. Это, вероятно, причина вашей ошибки.

b) getDerivedStateFromProps является предпочтительным методом жизненного цикла для этой цели https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

в) в качестве альтернативы вы можете рефакторинг этого компонента как функционального компонента и использовать ловушки React