在 MobX 中,如何在不重新设置每个值的情况下为整个可观察数组设置新值?
首先想到的是:
let arr = observable([]);
autorun(() => {
console.log('my array changed!');
});
arr = ['foo', 'bar'];
但这不会触发 autorun
,我只是删除了我的 observable array
并用新值/数组替换它。
那么,正确的做法是什么?
我的解决方案是使用另一个带有 setter 的变量,并在 setter 函数中 将可观察数组 index 更改为 index,替换、添加和删除索引。像这样:
( jsFiddle here )
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()
,它将替换整个数组的内容并触发渲染。我找到了after a suggestion关于 clear()
方法,并从那里更仔细地研究 the docs
.replace(newItems);
Replaces all existing entries in the array with new ones.
代码看起来像这样:
( 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')
);
关于javascript - 如何为整个 MobX 可观察数组设置新值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41207491/