Возвращает количество «ложных» логических значений из массива - MobX & React - PullRequest
Новая
       35

Возвращает количество «ложных» логических значений из массива - MobX & React

2 голосов
/ 20 марта 2019

У меня есть фиктивный файл данных, содержимое которого упорядочено следующим образом: 

{
  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».

Будем признательны за любые указания относительно того, как подходить к ситуации.

Ответы [ 2 ]

2 голосов
/ 20 марта 2019

Вы можете использовать метод массива 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>
    );
  })
);
0 голосов
/ 20 марта 2019

Вы можете отфильтровать все ложные значения и затем взять длину отфильтрованных значений. 

let obj = {
  id: 6,
  name: 'example',
  time: new Date(),
  viewed: false,
}

let falseCount = Object.values(obj).filter(e=>!e).length

console.log(falseCount)
...