Question

我有一个模拟数据文件，其内容安排如下：

{
  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>
  );
});

“查看的项目：2”所在的位置，用“ 2”代替计数值。

任何有关如何处理这种情况的指导都将受到赞赏。

Answer 1

您可以使用数组方法filter创建一个新数组，其中每个模型的viewed设置为false并将该数组的length返回为{{ 1}}。

unviewedCount

然后，您需要创建const ModelStore = types .compose(ModelStoreData) .named("ModelStore") .views(self => { return { get unviewedCount() { return self.Models.filter(model => !model.viewed).length; } }; });的实例并在组件上使用observer函数，以便在ModelStore发生更改时重新渲染组件。

unviewedCount

Answer 2

您可以过滤所有错误值，然后获取过滤值的长度。

let obj = {
  id: 6,
  name: 'example',
  time: new Date(),
  viewed: false,
}

let falseCount = Object.values(obj).filter(e=>!e).length

console.log(falseCount)

从数组中返回“假”布尔值的数量-MobX＆React

2 个答案: