[英]How to set new values to whole MobX observable array
在MobX中,如何在不重新設置每個值的情況下為整個可觀察數組設置新值?
首先想到的是:
let arr = observable([]);
autorun(() => {
console.log('my array changed!');
});
arr = ['foo', 'bar'];
但是這不會autorun
,我會刪除我的observable array
並用新值/數組替換它。
那么,這樣做的正確方法是什么?
我此解決方案是使用另一個變量與一個設置器 ,以及設置器函數內由索引改變觀察到的數組索引 ,置換,添加和刪除的索引。 像這樣:
( 這里是jsFiddle )
const {observable, computed, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const {render} = ReactDOM
const {autorun} = mobx
class Store {
@observable entries = [1,2,3,4,5];
set rows(arr) {
// add new values
for (let i = 0, l = arr.length; i < l; i++) {
this.entries[i] = arr[i];
}
// remove rest of entries
let diff = this.entries.length - arr.length;
if (diff > 0) {
while (diff > 0) {
this.entries.pop();
diff--;
}
}
}
}
const store = new Store();
@observer
class App extends Component {
updateRows(){
return this.props.entries.map(
(row, i) => <p key={i}>{row}</p>
);
}
render() {
const rows = this.updateRows();
return <div>{rows}</div>;
}
}
setTimeout(() => {
store.rows = ['foo', 'bar'];
document.body.innerHTML += 'Timeout fired...';
}, 1000);
render(
<App entries={store.entries} />,
document.getElementById('mount')
);
這是正確的方法嗎?
或者有沒有辦法只使用相同的變量重新賦值給整個數組?
TLDR; 使用store.entries.replace(['foo', 'bar']);
我找到了一個方法.replace()
,它將替換整個數組的內容並觸發渲染。 我在關於clear()
方法的建議之后找到它,並從那里仔細查看文檔
.replace(newItems);
用新的條目替換數組中的所有現有條目。
代碼將如下所示:
( jsFiddle )
const {observable, autorun} = mobx;
class Store {
@observable arr = [1,2,3,4,5];
}
const store = new Store();
autorun(() => {
console.log('my array changed!', store.arr.slice());
});
setTimeout(() => {
store.arr.replace(['foo', 'bar']);
}, 1000);
整個代碼是:
( jsFiddle )
const {observable, computed, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const {render} = ReactDOM
const {autorun} = mobx
class Store {
@observable entries = [1,2,3,4,5];
}
const store = new Store();
@observer
class App extends Component {
updateRows(){
return this.props.entries.map(
(row, i) => <p key={i}>{row}</p>
);
}
render() {
const rows = this.updateRows();
return <div>{rows}</div>;
}
}
setTimeout(() => {
store.entries.replace(['foo', 'bar']);
}, 1000);
render(
<App entries={store.entries} />,
document.getElementById('mount')
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.