React+Ant Design DatePicker异步取数据库值显示异常求助

问题根源 #

你直接在表格列的render函数中调用异步函数getDate，而async函数的返回值是Promise对象，不是实际的dayjs日期实例。当你把这个Promise传给DatePicker的value属性时，dayjs无法解析Promise，因此显示“Invalid Date”。另外，在render中调用async函数会导致每次组件渲染都触发请求，不仅性能差，还会引发状态不稳定的问题。

最优解决方案：一次性获取全量数据 #

既然你已经通过getRequests获取表格的全量数据，建议直接在getRequests中把每条记录的pub_date一并返回，这样就不需要单独请求每条数据的日期，从根源上避免异步问题：

调整后的代码示例 #

export function StoredRequests(props) {
  const [reqdata, setData] = useState([]);

  // 确保getRequests返回的数据包含pub_date字段
  useEffect(() => {
    const fetchRequests = async () => {
      const data = await getRequests();
      setData(data);
    };
    fetchRequests();
  }, [props.autht.access]);

  const columns = [
    {
      title: 'Search Request',
      dataIndex: 'request',
      width: '25%',
      editable: true,
    },
    {
      title: 'From Date',
      dataIndex: 'pub_date',
      width: '25%',
      render: (_, record) => (
        <DatePicker
          className={record.key}
          presets={rangePresets}
          showTime
          format="YYYY/MM/DD HH:mm:ss"
          onChange={onChange}
          onOk={onOk}
          // 直接使用dataSource中已有的pub_date，转换为dayjs实例
          value={dayjs(record.pub_date)}
        />
      ),
    },
  ];

  // 其余代码保持不变...
}

特殊场景：必须单独请求日期的处理 #

如果因为业务限制，必须单独请求每条记录的日期，需要用状态存储已获取的日期，避免在render中直接调用异步函数：

代码示例 #

export function StoredRequests(props) {
  const [reqdata, setData] = useState([]);
  // 用对象存储每条记录的日期，key为record.key，value为dayjs实例
  const [recordDates, setRecordDates] = useState({});

  useEffect(() => {
    const fetchRequests = async () => {
      const data = await getRequests();
      setData(data);
    };
    fetchRequests();
  }, [props.autht.access]);

  // 单独请求某条记录的日期并更新状态
  const fetchRecordDate = async (key) => {
    if (recordDates[key]) return; // 避免重复请求
    try {
      const date = await getDate(props, key);
      setRecordDates(prev => ({ ...prev, [key]: date }));
    } catch (err) {
      console.error('获取日期失败:', err);
    }
  };

  const columns = [
    // 其他列...
    {
      title: 'From Date',
      dataIndex: 'pub_date',
      width: '25%',
      render: (_, record) => {
        const date = recordDates[record.key];
        // 若未获取到日期，触发请求并显示加载状态
        if (!date) {
          fetchRecordDate(record.key);
          return <span>加载中...</span>;
        }
        return (
          <DatePicker
            className={record.key}
            presets={rangePresets}
            showTime
            format="YYYY/MM/DD HH:mm:ss"
            onChange={onChange}
            onOk={onOk}
            value={date}
          />
        );
      },
    },
  ];

  // 其余代码保持不变...
}

关键注意事项 #

• 永远不要在render函数中直接调用异步函数，这会导致组件重复渲染、多次请求，甚至引发无限循环。
• 优先选择一次性获取全量数据的方案，减少HTTP请求次数，提升性能和用户体验。
• 若必须单独请求，使用状态管理已获取的数据，避免重复请求。

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