React表格无法随数据更新重建及日期选择器异常的解决

问题 #

在React开发中遇到两个核心问题：

• 调用API成功获取数据后，表格组件无法自动更新；
• 使用DatePicker选择新日期后，实际请求的仍是旧日期（例如选2023-01-27，请求却用2023-01-18）。

相关代码如下：

const [loadingData, setLoadingData] = useState(true);
const [dataUpdated, setDataUpdated] = useState(false);
const [data, setData] = useState([]) 
const [Infodate, setInfoDate] = useState(new Date())
const [date , setDate] = useState("2023-01-25") 
const [ resource, setResource ] = useState( _resource_to_ask ) 
const [ link, setLink ] = useState(MyLink) 

function LDStoDateString() {
  let string_to_search = Infodate.toLocaleDateString(); 
  let parts = string_to_search.split('.');
  let day = parts[0]; 
  let mes = parts[1];
  let year = parts[2]; 
  setDate(`${year}-${mes}-${day}`);
 }

async function getData() { 
  console.log("GetData called") 
  setData([]) 
  LDStoDateString()
  let link_to_fetch = `${link}/${resource}?data=${date}` 
  await axios.get(link_to_fetch).then((response) => { 
    console.log("Data is accepted") 
    let items: any = [] 
    response.data.forEach(element => { 
      console.log(element) 
      items.push({ name: element.Name, bool1 : 
      StringVSBool(element.bool1),}) 
    });
    setData(items);
    setLoadingData(false); 
   }); 
} 

function handleDatePickerChange() { 
  setLoadingData(true) 
}
 
function SettingData(date_new) { 
  setInfoDate(date_new)
}

useEffect(() => {
  if (loadingData) {
    getData(); 
  }
}, [date, ...data]); 

return ( 
  <div className="App"> 
  <DatePicker
    dateFormat="yyyy-MM-dd"
    selected={Infodate}
    onChange={(date_new) => { SettingData(date_new) }}
  />
  { loadingData 
      ? ( <p>Loading Please wait...</p> )
      : <Table columns={cols} data={data} } />
   }
</div> 

问题原因 #

DatePicker日期错误 #

1. 日期转换依赖系统区域：toLocaleDateString()生成的格式随系统区域变化，比如部分区域是日.月.年，但如果系统用月/日/年，分割后会导致日和月错位，生成错误的日期字符串。
2. 异步状态更新延迟：getData中调用LDStoDateString后立即用date拼接请求链接，但setDate是异步操作，此时date还是旧值，请求自然用旧日期。

表格不更新 #

1. useEffect依赖错误：把...data加入依赖数组，导致依赖项过多且不稳定，要么触发无限循环，要么无法在数据更新时正确触发渲染。
2. 日期变更未触发数据请求：DatePicker的onChange只更新了Infodate，没有触发重新获取数据的逻辑，新日期无法传递到API。
3. 加载状态逻辑混乱：getData中先清空data再请求，但如果状态更新顺序出错，可能导致表格在新数据到来前就渲染空数据，后续数据更新无法触发重渲染。

修复方案 #

1. 修复日期处理逻辑 #

替换依赖区域的日期转换方式，直接用Date API生成标准格式，同时避免依赖异步状态更新：

// 生成标准yyyy-MM-dd格式的日期字符串
function formatDate(dateObj) {
  const year = dateObj.getFullYear();
  // 月份从0开始，需+1并补0确保两位数
  const month = String(dateObj.getMonth() + 1).padStart(2, '0');
  const day = String(dateObj.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 重构getData函数
async function getData() { 
  console.log("GetData called");
  setLoadingData(true); // 先设置加载状态
  const currentDateStr = formatDate(Infodate);
  const link_to_fetch = `${link}/${resource}?data=${currentDateStr}`;
  
  try {
    const response = await axios.get(link_to_fetch);
    console.log("Data is accepted");
    // 用map替代forEach，更简洁
    const items = response.data.map(element => ({
      name: element.Name,
      bool1: StringVSBool(element.bool1)
    }));
    setData(items);
  } catch (error) {
    console.error("数据获取失败：", error);
  } finally {
    setLoadingData(false); // 请求完成无论成败都结束加载
  }
}

2. 修复表格更新逻辑 #

调整useEffect依赖，同时让日期变更直接触发数据请求：

// 修改日期变更处理函数，更新日期后立即触发加载
function SettingData(date_new) { 
  setInfoDate(date_new);
  setLoadingData(true); // 触发useEffect执行getData
}

// 重构useEffect，只保留必要依赖
useEffect(() => {
  if (loadingData) {
    getData();
  }
}, [loadingData]); // 仅监听loadingData变化，避免无效触发

3. 其他优化 #

• 移除无用的dataUpdated和handleDatePickerChange，简化代码；
• 初始化date状态时直接用formatDate(new Date())，保持格式统一；
• 检查Table组件的cols定义，确保其能正确识别data中的字段（比如name、bool1），避免因字段不匹配导致表格不更新。

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