使用useState钩子修改函数组件状态失败，求问题排查

我帮你梳理下代码里的几个关键问题，它们就是导致你状态更新异常的根源：

1. 子组件未同步父组件的里程状态 #

你的CustomTrip组件计算出里程后，只更新了自己本地的totalMiles状态，但父组件TippingPoint完全没收到这个更新——因为你根本没调用父组件传过来的onTotalMileChange回调方法。这就导致父组件的totalMiles一直停留在初始值0，后续的calculateTotals自然也拿不到正确的里程数。

2. 父组件render方法缺少return语句 #

TippingPoint的render方法里，JSX代码没有被return包裹，这会直接导致组件无法渲染任何内容，相当于白写了这段UI逻辑。

3. 多余的bind语句（非致命，但需要清理） #

你在constructor里写了this.onTotalMileChange.bind(this)这类语句，但因为类方法用了箭头函数定义（比如onLocationOneChange = () => {}），箭头函数会自动绑定this到类实例，所以这些bind语句完全没用，可以删掉。

修改后的代码示例 #

CustomTrip组件（子组件）

import React, { useEffect } from "react";
import { COORDS } from "./coords";
const CustomTrip = ({ locationOne, locationTwo, onLocationOneChange, onLocationTwoChange, onTotalMileChange }) => {
  async function fetchDistance() {
    try {
      // 用模板字符串让URL更易读
      const res = await fetch(
        `https://api.mapbox.com/directions-matrix/v1/mapbox/driving/${locationOne};${locationTwo}?sources=1&annotations=distance&access_token=****`
      );
      // 检查API响应是否正常
      if (!res.ok) throw new Error('Mapbox API请求失败');
      
      const mapBoxObject = await res.json();
      const meters = mapBoxObject.distances[0];
      // 处理API返回异常的情况
      if (typeof meters === 'undefined') {
        console.error('无法获取有效距离数据');
        return;
      }

      const miles = parseInt(meters) * 0.00062137119;
      const formattedMiles = miles.toFixed(2);
      // 触发父组件的回调，同步里程数据
      onTotalMileChange({ target: { value: formattedMiles } });
      console.log(formattedMiles);
    } catch (err) {
      console.error('计算距离出错:', err);
    }
  }

  useEffect(() => {
    fetchDistance();
  }, [locationOne, locationTwo, onTotalMileChange]); // 加上回调方法作为依赖，符合hooks规则

  return (
    <div>
      <center>
        <h1>Customize your trip</h1>
      </center>
      <div>Select your starting point</div>
      <select value={locationOne} onChange={onLocationOneChange}>
        {Object.entries(COORDS).map(([campus, longLatt]) => (
          <option key={campus} value={longLatt}>
            {campus}
          </option>
        ))}
      </select>
      <div>Select your destination</div>
      <select value={locationTwo} onChange={onLocationTwoChange}>
        {Object.entries(COORDS).map(([campus, longLatt]) => (
          <option key={campus} value={longLatt}>
            {campus}
          </option>
        ))}
      </select>
    </div>
  );
};
export default CustomTrip;

TippingPoint组件（父组件）

class TippingPoint extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      totalMiles: 0,
      locationOne: '-97.4111604,35.4653761',
      locationTwo: '-73.778716,42.740913'
    }
    // 删掉多余的bind语句
  }

  calculateTotals = () => { 
    // 现在可以拿到更新后的totalMiles做计算了
    console.log('当前总里程:', this.state.totalMiles);
    // 你的业务计算逻辑
  };

  onTotalMileChange = (event) => {
    // 把字符串转成浮点数，方便后续计算
    this.setState({totalMiles: parseFloat(event.target.value)}, this.calculateTotals);
  };

  onLocationOneChange = (event) => {
    this.setState({locationOne: event.target.value}, this.calculateTotals);
  };

  onLocationTwoChange = (event) => {
    this.setState({locationTwo: event.target.value}, this.calculateTotals);
  };

  render(){
    // 加上return语句，确保UI能渲染
    return (
      <div>
        <p>Trip Builder</p>
        <CustomTrip 
          totalMiles={this.state.totalMiles} 
          locationOne={this.state.locationOne} 
          locationTwo={this.state.locationTwo} 
          onLocationOneChange={this.onLocationOneChange} 
          onLocationTwoChange={this.onLocationTwoChange} 
          onTotalMileChange={this.onTotalMileChange}
        />
      </div>
    );
  }
}
export default TippingPoint;

修改核心要点 #

1. 让父组件统一管理totalMiles状态，子组件只负责计算并通过回调把结果传给父组件，保证父子状态同步。
2. 给API请求加上错误处理，避免请求失败时组件崩溃。
3. 修复父组件render的return问题，确保UI正常渲染。
4. 清理无用代码，符合React的最佳实践。

内容的提问来源于stack exchange，提问作者Josh Wren