zdl
|
d57db02c15
|
fix(klineDataCache): 修复 K线类型参数错误导致的 400 错误
**问题描述**
MiniTimelineChart 组件加载时，K线数据请求失败：
- 错误: `HTTP error! status: 400`
- 响应: `{"error":"不支持的类型"}`
- 请求: `GET /api/stock/{code}/kline?type=minute`
**根本原因**
klineDataCache.js 使用了错误的 K线类型参数：
- ❌ 使用: `'minute'`
- ✅ 应为: `'timeline'`
根据 API 文档 (MOCK_API_DOCS.md)，后端支持的类型：
- `'timeline'` - 分时图
- `'daily'` - 日K线
- `'weekly'` - 周K线
- `'monthly'` - 月K线
**修复内容**
### 1. src/views/Community/components/StockDetailPanel/utils/klineDataCache.js
```diff
const requestPromise = stockService
- .getKlineData(stockCode, 'minute', normalizedEventTime)
+ .getKlineData(stockCode, 'timeline', normalizedEventTime)
.then((res) => {
```
### 2. docs/StockDetailPanel_BUSINESS_LOGIC.md
更新文档中的 K线类型说明：
```diff
- **K线类型**: 'minute' (分时), 'day' (日K), 'week' (周K), 'month' (月K)
+ **K线类型**: 'timeline' (分时), 'daily' (日K), 'weekly' (周K), 'monthly' (月K)
```
更新代码示例：
```diff
const requestPromise = stockService
- .getKlineData(stockCode, 'minute', eventTime)
+ .getKlineData(stockCode, 'timeline', eventTime)
```
**验证**
- ✅ 与 MidjourneyHeroSection.js 中的用法保持一致
- ✅ 符合 MOCK_API_DOCS.md 规范
- ✅ 消除控制台 400 错误
**影响范围**
- StockDetailPanel 中的 MiniTimelineChart 组件
- 所有使用 fetchKlineData 的地方
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-30 18:32:24 +08:00 |
|
zdl
|
1b2437e71c
|
fix: 使用 shallowEqual 修复 useSelector 引用不稳定导致的无限循环
## 问题
仍然报错 "Maximum update depth exceeded"，第一次修复不完整。
## 根本原因（第二轮诊断）
useSelector 返回的数组/对象引用不稳定：
**useEventStocks.js**
```javascript
const stocks = useSelector(state =>
eventId ? (state.stock.eventStocksCache[eventId] || []) : []
);
// 每次 Redux state 更新，|| [] 都会创建新数组引用
```
**StockDetailPanel.js 触发频繁更新**
```javascript
useEffect(() => {
setFilteredStocks(stocks); // stocks 引用变化 → setState
}, [searchText, stocks]); // stocks 是不稳定的引用
```
**无限循环链**：
1. Redux state 更新 → stocks 新引用
2. stocks 变化 → 触发 StockDetailPanel useEffect
3. useEffect 调用 setFilteredStocks → 组件重新渲染
4. 重渲染可能触发其他操作 → Redux 更新
5. 返回步骤 1，无限循环 🔁
## 解决方案
在所有 useSelector 调用中使用 shallowEqual 进行浅比较：
```javascript
import { useSelector, shallowEqual } from 'react-redux';
const stocks = useSelector(
state => eventId ? (state.stock.eventStocksCache[eventId] || []) : [],
shallowEqual // 内容相同则返回旧引用，防止不必要的更新
);
```
## 修改文件
1. **useEventStocks.js** - 6 个 useSelector 添加 shallowEqual
- stocks, quotes, historicalEvents, loading
2. **useStockMonitoring.js** - 1 个 useSelector 添加 shallowEqual
- quotes
3. **useWatchlist.js** - 1 个 useSelector 添加 shallowEqual
- watchlistArray
## 工作原理
shallowEqual 会比较新旧值的内容：
- 如果内容相同 → 返回旧引用 → 不触发依赖更新
- 如果内容不同 → 返回新引用 → 正常触发更新
这样可以防止因为引用变化导致的不必要重新渲染。
## 影响
- ✅ 修复无限循环错误
- ✅ 减少不必要的组件重新渲染
- ✅ 提升整体性能
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-30 16:30:35 +08:00 |
|