![](/img/trans.png)
[英]Check if all the values in array of object is equal to false and return true in react
[英]Return number of "false" Boolean values from an array - MobX & React
我有一個模擬數據文件,其內容排列如下:
{
id: 6,
name: 'example',
time: new Date(),
viewed: false,
},
我的目標是能夠計算“假”值的數量,並將該計數返回給要用作內容的組件。
我有一個定義 ModelStore 的文件。 它的開頭是這樣的:
const Model = types
.model('Model', {
id: types.identifierNumber,
name: types.string,
time: types.Date,
viewed: types.boolean,
});
/** @typedef {typeof Model} Model */
/** @typedef {import('mobx-state-tree').Instance<typeof Model>} ModelInstance */
const ModelStoreData = types.model({ Models: types.array(Model) });
您可以看到模擬數據作為數組導入。
然后我想出了以下內容:
const ModelStore = types
.compose(
ModelStoreData,
)
.named('ModelStore')
.views((self) => {
/**
* Count number of unviewed models
* @returns {typeof self.Models}
*/
const countUnviewed = (Models) => {
/**
* Numerical urgency levels for sorting
* @enum {number}
*/
const viewedValues = {
[true]: 0,
[false]: 1,
};
/** Returns a numerical value */
const value = Model => viewedValues[Model.viewed];
return Models
// do something with value here to add up
};
return {
get unviewedCount() {
return countUnviewed(self.Models);
},
};
});
/** @typedef {typeof ModelStore} ModelStore */
/** @typedef {import('mobx-state-tree').Instance<typeof ModelStore>} ModelStoreInstance */
export default ModelStore;
但我不確定如何從這里開始實際計算“假”值的數量。
然后我有這個需要插入計數值的組件:
const myComponent = withRouter(({ history }) => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const toggle = () => {
setIsDropdownOpen(prevDropdownOpen => !prevDropdownOpen);
};
const handleOnClick = () => {
history.push(routes.home.path);
};
return (
<Dropdown isOpen={isDropdownOpen} toggle={toggle}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header>viewed items: 2</DropdownItem>
<Button outline onClick={handleOnClick}>go home</Button>
</DropdownMenu>
</Dropdown>
);
});
其中“viewed items: 2”所在位置,用“2”代替計數值。
任何有關如何處理這種情況的指導將不勝感激。
您可以使用數組方法filter
創建一個新數組,其中每個viewed
模型都設置為false
並將該數組的length
返回為unviewedCount
。
const ModelStore = types
.compose(ModelStoreData)
.named("ModelStore")
.views(self => {
return {
get unviewedCount() {
return self.Models.filter(model => !model.viewed).length;
}
};
});
那么你就需要創建的實例ModelStore
和使用observer
功能的組件,使您的組件將重新渲染,如果unviewedCount
變化。
const store = ModelStore.create();
const myComponent = withRouter(
observer(({ history }) => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const toggle = () => {
setIsDropdownOpen(prevDropdownOpen => !prevDropdownOpen);
};
const handleOnClick = () => {
history.push(routes.home.path);
};
return (
<Dropdown isOpen={isDropdownOpen} toggle={toggle}>
<DropdownToggle caret>Dropdown</DropdownToggle>
<DropdownMenu right>
<DropdownItem header>
viewed items: {store.unviewedCount}
</DropdownItem>
<Button outline onClick={handleOnClick}>
go home
</Button>
</DropdownMenu>
</Dropdown>
);
})
);
您可以過濾所有錯誤值,然后獲取過濾值的長度。
let obj = { id: 6, name: 'example', time: new Date(), viewed: false, } let falseCount = Object.values(obj).filter(e=>!e).length console.log(falseCount)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.