React中用useQuery结果触发按钮修改父组件状态时ID变为NaN的解决办法

出现ID变为NaN的核心原因通常是传递的id值无效（比如undefined、非数字字符串），或是组件props传递/处理方式存在疏漏，以下是具体解决办法：

1. 先排查数据源有效性 #

首先确认useQuery返回的data.something中，每个项确实包含id字段，且该字段是可转换为数字的有效值（比如数字类型或"123"这类数字字符串）。如果API返回的字段名是_id而非id，需要对应修改解构的字段名。

2. 修正组件props传递逻辑 #

原代码中父组件将handleNewID包装成props对象传递，写法冗余且易混淆，建议直接传递函数：

父组件（TestClass）修正： #

class TestClass extends React.Component{
  constructor(props) {
    super(props);
    this.handleNewID = this.handleNewID.bind(this);
    this.state = {
      ID: 0,
    };
  }

  handleNewID({id}){
    // 先将id转为数字，避免非数字类型导致NaN
    const validId = Number(id);
    // 仅当转换后是有效数字时才更新状态
    if (!isNaN(validId)) {
      this.setState({ID: validId});
    }
  }

  render(){
    // 直接传递handleNewID，无需包装成props对象
    return(
      <div>
          <TestFunction handleNewID={this.handleNewID}/>
      </div>
    )
  }
}

子组件（TestFunction）修正： #

function TestFunction({ handleNewID }){
  const {loading, error, data} = useQuery(GET_SOMETHING);
  
  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error ... {JSON.stringify(error, null, 2)}</p>;
  // 确保data.something存在再执行map
  if (data?.something) {
    return data.something.map((item) => (
      // 必须给map的元素加唯一key
      <div key={item.id}>
        <button onClick={() => handleNewID({id: item.id})}> Test Button </button>
      </div>
    ));
  }
  // 无数据时返回占位内容
  return <p>No data available</p>;
}

关键优化点说明 #

• props传递简化：直接传递handleNewID函数，避免多层对象嵌套导致的取值错误。
• id有效性校验：在handleNewID中通过Number()转换并判断isNaN，确保只有有效数字才更新状态。
• 安全取值：使用data?.something可选链操作符，避免data为undefined时触发报错。
• 添加key属性：React列表渲染必须提供唯一key，避免渲染警告及性能问题。

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