我如何更新状态以使用 array.map 函数更新数组内对象的值

Question

函数 handleFeetAndInch 使用索引更新状态，同时使用 array.map 并传递更新状态的函数，但映射的状态被调用的所有函数调用引用，因此其他映射索引不会获得更新的状态值，是否存在围绕这种或另一种基于测量对象的情况转换值的方法的任何实践具有如下属性： state = {measurements:[{name:'',value:'',algo:''}...]

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
    }));
  }
};

Answer 1

您没有正确使用地图功能。 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
    }));
  }
};