React Hooks实现数据模型：新手求助修正代码问题

代码中的核心问题 #

• 状态更新方式错误：直接修改dataModel或使用concat但未返回新状态，且map返回数组会把dataModel从对象改成数组，破坏初始结构。
• 混用async/await与then：写法冗余且易导致逻辑混乱。
• API地址错误：fetchLoc中调用的是getYear接口，应对应获取地区的接口（比如getLoc）。
• 未使用函数式更新：并发更新时可能丢失之前的状态，因为setDataModel的新状态依赖旧状态。
• 组件传参错误：Query组件的传参方式冗余，无需包裹在props对象中。

修正后的代码 #

import './App.css';
import Query from './components/landing/query';
import React, { useState, useEffect } from 'react';

function App() {  
  const [dataModel, setDataModel] = useState({
    yearOptions: [],
    locOptions: []
  });

  // 抽离重复的数据转换逻辑
  const transformData = (data) => {
    return data.map(x => ({
      key: x.key,
      text: x.value,
      value: x.value
    }));
  };

  const fetchYear = async () => {
    try {
      const response = await fetch("http://localhost:3002/getYear");
      const data = await response.json();
      const transformedData = transformData(data);
      // 函数式更新，基于最新state修改，避免状态覆盖
      setDataModel(prev => ({
        ...prev,
        yearOptions: transformedData
      }));
    } catch (error) {
      console.error('获取年份数据失败:', error);
    }
  };

  const fetchLoc = async () => {
    try {
      // 修正为获取地区的接口地址
      const response = await fetch("http://localhost:3002/getLoc");
      const data = await response.json();
      const transformedData = transformData(data);
      setDataModel(prev => ({
        ...prev,
        locOptions: transformedData
      }));
    } catch (error) {
      console.error('获取地区数据失败:', error);
    }
  };

  useEffect(() => {
    fetchYear();
    fetchLoc();
  }, []);

  return (
    <div className="App">
      <header className="App-header">      
        React Based FrontEnd and Nodejs Based Rest API Demo Project
      </header>
      {/* 直接传递model属性，简化传参 */}
      <Query model={dataModel} />
    </div>
  );
}

export default App;

关键修改说明 #

• 工具函数抽离：把重复的数组转换逻辑做成transformData函数，减少代码冗余。
• 正确状态更新：使用函数式更新setDataModel(prev => ...)，通过展开运算符...prev保留原有状态，仅更新目标字段，避免覆盖其他数据。
• 统一async/await用法：去掉冗余的then链，改用try/catch捕获请求错误，增强代码健壮性。
• 修正API地址：将fetchLoc的接口改为对应地区数据的接口（需根据后端实际接口调整）。
• 组件传参优化：直接给Query组件传递model={dataModel}，组件内部可通过props.model直接访问数据。

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