mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-15 16:56:56 +08:00
**Problem:** Unable to type comma-separated trading symbols in the input field. When typing "BTCUSDT," → comma immediately disappears → cannot add more symbols. **Root Cause:** Circular state dependency between `useEffect` and `handleInputChange`: ```typescript // ❌ Lines 146-149: useEffect syncs selectedCoins → formData useEffect(() => { const symbolsString = selectedCoins.join(',') setFormData(prev => ({ ...prev, trading_symbols: symbolsString })) }, [selectedCoins]) // Lines 150-153: handleInputChange syncs formData → selectedCoins if (field === 'trading_symbols') { const coins = value.split(',').map(...).filter(...) setSelectedCoins(coins) } ``` **Execution Flow:** 1. User types: `"BTCUSDT,"` 2. `handleInputChange` fires → splits by comma → filters empty → `selectedCoins = ["BTCUSDT"]` 3. `useEffect` fires → joins → overwrites input to `"BTCUSDT"` ❌ **Trailing comma removed!** 4. User cannot continue typing **Solution:** Remove the redundant `useEffect` (lines 146-149) and update `handleCoinToggle` to directly sync both states: ```typescript // ✅ handleCoinToggle now updates both states const handleCoinToggle = (coin: string) => { setSelectedCoins(prev => { const newCoins = prev.includes(coin) ? ... : ... // Directly update formData.trading_symbols const symbolsString = newCoins.join(',') setFormData(current => ({ ...current, trading_symbols: symbolsString })) return newCoins }) } ``` **Why This Works:** - **Quick selector buttons** (`handleCoinToggle`): Now updates both states ✅ - **Manual input** (`handleInputChange`): Already updates both states ✅ - **No useEffect interference**: User can type freely ✅ **Impact:** - ✅ Manual typing of comma-separated symbols now works - ✅ Quick selector buttons still work correctly - ✅ No circular dependency - ✅ Cleaner unidirectional data flow Fixes #632 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
committed by
GitHub
parent
7b0b19708e
commit
1502b7ba0c
@@ -153,12 +153,6 @@ export function TraderConfigModal({
|
|||||||
fetchPromptTemplates()
|
fetchPromptTemplates()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// 当选择的币种改变时,更新输入框
|
|
||||||
useEffect(() => {
|
|
||||||
const symbolsString = selectedCoins.join(',')
|
|
||||||
setFormData((prev) => ({ ...prev, trading_symbols: symbolsString }))
|
|
||||||
}, [selectedCoins])
|
|
||||||
|
|
||||||
if (!isOpen) return null
|
if (!isOpen) return null
|
||||||
|
|
||||||
const handleInputChange = (field: keyof TraderConfigData, value: any) => {
|
const handleInputChange = (field: keyof TraderConfigData, value: any) => {
|
||||||
@@ -176,11 +170,15 @@ export function TraderConfigModal({
|
|||||||
|
|
||||||
const handleCoinToggle = (coin: string) => {
|
const handleCoinToggle = (coin: string) => {
|
||||||
setSelectedCoins((prev) => {
|
setSelectedCoins((prev) => {
|
||||||
if (prev.includes(coin)) {
|
const newCoins = prev.includes(coin)
|
||||||
return prev.filter((c) => c !== coin)
|
? prev.filter((c) => c !== coin)
|
||||||
} else {
|
: [...prev, coin]
|
||||||
return [...prev, coin]
|
|
||||||
}
|
// 同时更新 formData.trading_symbols
|
||||||
|
const symbolsString = newCoins.join(',')
|
||||||
|
setFormData((current) => ({ ...current, trading_symbols: symbolsString }))
|
||||||
|
|
||||||
|
return newCoins
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user