![](/img/trans.png)
[英]Validating Credit Card in JavaScript, using loop to cycle through form field names, getting error
[英]Getting infinite loop using cycle-idb with text field for input
我一直在嘗試創建一個簡單的測試應用程序,該應用程序從文本字段獲取用戶輸入,進行顯示,並使用cycle-idb對其進行持久化 。 但是無論我做什么,我都會陷入無限循環。
這是整個主要功能:
function intent(domSources) {
return domSources.select('.name')
.events('input')
.map(ev => ev.target.value);
};
function model(input$, db$) {
const log$ = db$;
return xs.combine(input$, log$)
.map(([input, logs]) => {
return {
id: 1,
name: input,
}
}).startWith({id: 1, name: ""});
};
function view(state$) {
return state$.map(log => {
return (
<div>
<label for='name'>Name: </label>
<input
className='name'
type='text'
value={log.name}
placeholder="Enter a log name"
/>
<p>{log.name}</p>
</div>
)
});
};
function persist(state$) {
return state$.map(log => {
return $put('logs', log)
});
};
export function main (sources) {
const db$ = sources.IDB.store('logs').getAll();
const input$ = intent(sources.DOM);
const state$ = model(input$, db$);
const vtree$ = view(state$);
const updateDb$ = persist(state$);
return {
DOM: vtree$,
IDB: updateDb$,
};
}
我正在嘗試使用MVI並以TodoMVC為例,但是我不知道如何在不創建無限循環的情況下管理循環依賴關系。
任何建議或指向其他參考文獻的指針將不勝感激。
對此的技巧是使用dropRepeats進行深度比較。
gitter的答案指向“優化”解決方案:
function model(input$, db$) {
return xs.merge(xs.never(), db$.take(1)).map(name => {
return input$.startWith(name).map(name => {
return { id: 1, name }
})
}).flatten()
};
不幸的是, 第一個答案導致中斷對數據庫的更新流。
在麻煩中,@ janat08建議對persist
函數進行以下更改,這確實對我有用:
function persist(state$) {
return state$.compose(dropRepeats((x, y) => {
return x.id === y.id && x.name === y.name;
})).map(log => {
return $put('logs', log)
});
};
還沒有將其標記為解決方案,因此Jan可以編輯自己的解決方案,或者如果有人提出了一個不太惡意的解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.