React子组件props混淆：bills props出现dates值问题排查

核心原因 #

1. 初始空值触发错误接口请求 #

组件初始化时selectedDate为空字符串，此时callbackGetBills中的请求路径变为endpoint/，和callbackGetDates的请求接口完全一致。组件挂载时，监听callbackGetBills的useEffect执行，请求到日期列表数据并赋值给bills，这就导致子组件先打印出日期数组。

2. 违规的import位置 #

ComponentPage的import语句写在了函数内部，违反ES模块语法规范，可能引发模块加载或组件渲染的异常，加重状态混乱。

解决方案 #

1. 限制账单接口的触发条件 #

修改监听selectedDate的useEffect，仅当selectedDate非空时调用接口：

useEffect(function() {
  if (selectedDate) {
    callbackGetBills();
  }
}, [callbackGetBills]);

或者在callbackGetBills内部增加空值判断：

const callbackGetBills = useCallback(function() {
  async function getBills() {
    if (!selectedDate) return;
    const {data} = await Api.get(`endpoint/${selectedDate}`);
    setBills(data);
  }
  return getBills();
}, [selectedDate]);

2. 修正import位置 #

将所有import语句移到文件顶层（函数外部）：

import Api from "Some/Axios/Config/Folder";
import ComponentOne from "components/ComponentOne";
import ComponentTwo from "components/ComponentTwo";
import ComponentThree from "components/ComponentThree";

export default function ComponentPage() {
  // 组件状态与逻辑代码
}

3. 可选：设置默认选中日期 #

如果希望页面加载后直接展示账单，可以在获取日期列表后设置默认选中项：

const callbackGetDates = useCallback(function() {
  async function getDates() {
    const {data} = await Api.get("endpoint/");
    setDates(data);
    if (data.length > 0) {
      setSelectedDate(data[0]);
    }
  }
  return getDates();
}, []);

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