как обновить состояние в реакции на обновление значения объекта внутри массива с помощью функции array.map - PullRequest
2 голосов
/ 19 января 2020

функция handleFeetAndInch обновляет состояние, используя индекс, используя array.map и передавая функцию, которая обновляет состояние, но на отображаемое состояние ссылаются все вызываемые вызовы функций, поэтому другие индексы карты не получают обновленные значения состояния Существуют ли какие-либо практики в отношении того или иного способа преобразования значения, основанного на случаях, когда объект измерения имеет следующие свойства: состояние = {измерения: [{имя: '', значение: '', al go: ''} ...]

handleFeetandInch = (key, nameValue, value) => {
  let realFeet = (value * 0.3937) / 12;
  let feet = Math.floor(realFeet);
  let inches = Math.round((realFeet - feet) * 12);
  let updatedValue = `${feet}'${inches}"`;
  const newMeasurement = [...this.state.measurements];
  newMeasurement[key] = {
    name: nameValue,
    value: updatedValue
  };
  this.setState({
    measurements: newMeasurement
  });
};

handleUnitChange = () => {
  if (this.state.isCm) {
    // reset State
  } else {
    this.state.measurements.map((measurement, key) =>
      measurement.algo === 1
        ? this.handleFeetandInch(key, measurement.name, measurement.value)
        : this.handleInches(key, measurement.name, measurement.value)
    );
    this.setState(prevState => ({
      isCm: !prevState.isCm
    }));
  }
};

1 Ответ

0 голосов
/ 19 января 2020

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

Обновление handleFeeAndInch просто является обратным вызовом карты, возвращая новое значение в новый массив, затем установить состояние с помощью этого массива.

handleFeetandInch = (key, nameValue, value) => {
  let realFeet = (value * 0.3937) / 12;
  let feet = Math.floor(realFeet);
  let inches = Math.round((realFeet - feet) * 12);
  let updatedValue = `${feet}'${inches}"`;

  // return new measurement value
  return {
    name: nameValue,
    value: updatedValue
  };
};

handleUnitChange = () => {
  if (this.state.isCm) {
    // reset State
  } else {
    // get array of new measurements
    const newMeasurements = this.state.measurements.map((measurement, key) =>
      measurement.algo === 1
        ? this.handleFeetandInch(key, measurement.name, measurement.value)
        : this.handleInches(key, measurement.name, measurement.value)
    );
    this.setState(prevState => ({
      measurements: newMeasurements
    }));
    this.setState(prevState => ({
      isCm: !prevState.isCm
    }));
  }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...